d2bjs / d2b Goto Github PK

I am using vue-d2b and I have a weird empty space before and after my graph. This is what it looks like: https://gyazo.com/6ba59e344403edafe5a7eada070e8647.

I know this is probably a configuration issue but I can't figure out what I need to configure from the documentation that is available.

Please help.

Hello everyone! Nice library in here.

I'm trying to set the initial position of the nodes in the sankey diagram, but got stuck in using the .nodes() method.

What I get is this:

But I need to be set like this (without manually dragging it):

To give all the info, I'm using the vuejs wrapper, but I don't think this issue belongs in there.

This is my code:

chartConfig (config) {
        config
          .sankey()
          // .nodes(nodes => console.log(nodes)) // GIVES ERROR
          // .links(links => console.log(links)) // GIVES ERROR
          .nodeDraggableX(false)
          .nodeDraggableY(true)
          .nodeColor((obj, index) => {
            return index >= 4 ? bad : index >= 2 ? neutral : index >= 1 ? good : origin
          })
          .linkSourceColor((obj, index) => {
            return origin
          })
          .linkTargetColor((obj, index) => {
            return index >= 3 ? bad : index >= 1 ? neutral : good
          })
          .sankey()
          // .nodes(nodes => console.log(nodes)) // GIVES ERROR
          // .links(links => console.log(links)) // GIVES ERROR
          .nodePadding(50)
}

I'm trying to access the nodes or the links to manually force the first node's initial .y coordinate to equal 0 but no luck so far. No matter where I try to access those methods, it always gives me this error:

I don't get what I am doing wrong, cause I was able to use the other methods .nodeColor(), .linkSourceColor() and .linkTargetColor() with no problem, as stated in the docs.

Any help will be appreciated.

Thank you!

Thanks so much for this fantastic library with documentation and even vue integration. I love sunburst, but I am having trouble with sunburst config to use name instead of label. I have this working without vue, but I have not yet found the secret combination. I am determined to figure it out, but I thought perhaps you could give me a clue. I assume the answer will be something like the vue pie chart example.

        pieChartConfig: function (chart) {
          chart.donutRatio(0.5);
        }

Thanks again for all the effort and diligence and open source!

App.vue

<template>
  <div id="app">
      <pie-chart :pieChartData="pieChartData" :pieChartConfig="pieChartConfig"></pie-chart>
  </div>
</template>

<script>
 import { vueChartPie } from 'd2b';

export default {
  name: 'app',
  data() {
    return {
        pieChartData: [
	  {label: 'arc 1', value: 23},
    	  {label: 'arc 2', value: 31},
    	  {label: 'arc 3', value: 80},
    	  {label: 'arc 4', value: 8}
	],
	pieChartConfig: chart => {
	  chart.donutRatio(.5);
        }
    }
  },

  components: {
    pieChart: vueChartPie
  }
}
</script>

throws the following error:

Uncaught TypeError: Cannot read property 'filter' of undefined
    at HTMLDivElement.update (d2b.cjs.js?0d96:4419)
    at HTMLDivElement.eval (d2b.cjs.js?0d96:4380)
    at Selection.__webpack_exports__.a [as each] (each.js?7c75:5)
    at chart (d2b.cjs.js?0d96:4379)
    at Selection.__webpack_exports__.a [as call] (call.js?89d1:4)
    at VueComponent.update (d2b.cjs.js?0d96:5214)
    at VueComponent.boundFn [as update] (vue.esm.js?efeb:179)
    at VueComponent.updateNow (d2b.cjs.js?0d96:5219)
    at boundFn (vue.esm.js?efeb:180)

Graph stacking is currently disabled if there is only one graph to be stacked. This causes inconsistencies in the case of some stack offsets like d3.stackOffsetExpand. Possibly add stacking back in for single graph stacks.

I'm trying to source in using the minified version using the following link :

<script src = "https://unpkg.com/[email protected]/dist/d2b.min.js" />

But I get the following error:
ReferenceError: d2b is not defined

I am also including d3 v5. So I know thats not a problem.

Hi, I am using vue d2b to generate zoomable sunburst plots. I have come across an issue where when you zoom in and make a particular ring the new 'root' the slices that follow may visually be misleading. For example the slice may indicate 30% of the root but visually it would ring around more that halfway around the circle.

This can be seen here https://bl.ocks.org/timelyportfolio/be8412a07b00de20e725e3757605c63f/fb1c90563631c6901c1280dec883fb13e6e3577a

If you zoom in on b.2, b.2.c is 29% but rings around more than halfway around the circle.

Is there a fix for this?

Hello,
Thanks for your work!

How I can replace inner labels in pieChart's arcs? I want use the labels from data obj instead the procents.

Hi @kevinwarne,

I'm having the requirement to drill down into the data of the Sankey chart when clicking on a node. Unfortunately, I didn't find any hint in the documentation so I wonder if this is possible at all?

Sry for using Github Issues for questions, but I don't know another way to get in contact with you.

Thx in advance.

You can see in the official example that the tooltip pops up before the cursor hits the bar (left to right) and disappears before the cursor clears the bar. Looks like this may be a misalignment?

http://www.d2bjs.org/example_categories/1/entries/6

I'm using a boxplot in a chartAxis with vuejs and i would like to remove legend
i try
config: function (axis) {axis.legend(false)}
but i got error p.legend.empty

I have some data where a flow proceeds in discrete time chunks, but the value of my key variable changes from the beginning to the end of a chunk. I've been using your sunburst plot (through sunburstR) to represent the data, using the ending value to color each of the arcs.

Would it be possible to change the fill color to a gradient? I found an example of a radial gradient filling function here but have no idea how to integrate something like that into your code. With a gradient I could represent the change in my variable value within a time chunk. (In my particular example the starting variable value of a time chunk is not necessarily the ending value of its ancestor).
Thanks for any help.

Are there any examples of event handling, such as click or mouseover, with vuejs charts? I looked for chart.on but it is not defined.

Finally circling back to add your amazing sunburst to the R package sunburstR. What are your thoughts on a format (see line) prop for the sunburst legend and tooltip in case a user is not working with whole numbers? I'm happy to help if you deem valuable and appropriate.

Thanks so much!

Several places are incorrectly using javascripts default value fallback. Will be fixed soon.

Hi I am trying to create a sunburst graph for my data and I would like each variable to have a specific color. However I can't seem to get it to work properly as some variables get colored but the majority of them are the same color. I am following this example https://bl.ocks.org/timelyportfolio/be8412a07b00de20e725e3757605c63f/fb1c90563631c6901c1280dec883fb13e6e3577a
But in the treemap creation I have specified type = 'categorical' and have a column of all the unique variables set as vColor.
Any help would be greatly appreciated.

After installing d2b ,how will i import for ??????????

For example, if I've got a line chart that represents money, but my data is in cents, how would I provide formatting to convert it to show strings like $2.00 if the value in the Y axis is actually 200?

I would assume this formatting would persist into the tooltip also?

I'm using a stacked axis chart where I try to apply a fixed sorting to the labels, as the default sorting changes every time I get new data.

I tried to configure the y axis as follows:

.y(function (d, points) {
                return {
                  axis: d3.axisLeft().tickFormat(function (t) {
                    return d3.format(",.0%")(t);
                  }),
                  scale: d3.scaleLinear()
                    .domain(points)
                    .range(["unmapped", "remapped", "selfmapped"])
                }
              })

without success. Could you add an example for sorting to your documentation? In the closed issues I only found an example how to sort the sunburst chart, but there one can use the .sort method of the d3 pie. I didn't find any sort method on the svgBar generator, so I tried it with the above code.

My data contains percentage values on the y axis and timestamps on the x axis. I guess the scale for the y axis defines the sorting of the percentage values instead of the labels. But how can I sort the stacked labels?

Because the tooltip container for all charts is globally generated, it is not removed when the chart is removed. This is an issue with a v-if toggle directive because you may end up having tooltip containers that don't have an associated chart.

Hello,

I'm trying to achieve this kind of chart : https://www.highcharts.com/demo/pie-donut

I was thinking to use your sunburst chart, but I have few questions about it :

1. I saw you added recently annotations for some charts, but I don't see an integration with sunburst. Is it planned ? Else, how could I add them ?

2. Is there a way for http://docs.d2bjs.org/charts/sunburst.html to disable the click ? (in order to get the hover with tooltip + highlighting ancestors, but avoid navigation)

Thanks for this amazing library :)

Hi, I am wondering if there exists a list of all the possible configurations under chart.sunburst()?
I have been trying to figure out how to sort the arcs by size and I am assuming that the configuration is under chart.sunburst().sort but it hasn't been working for me.
I have tried these two variations:
chart.sunburst()
.sort(function(a.b){return d3.descending(a.x, b.x)}
and
.sort(function(a,b){return b.x - a.x}

Fix sunburst click to zoom on mobile.