vasturiano / sunburst-chart Goto Github PK

The translucent black background is too short for the breadcrumb text that exceeds 320px.

Can we remove max-width: 320px from the .sunburst-tooltip CSS class?

Thank you for creating this!

I need to fit the chart inside a responsive div (materialize cards). Just found workarounds for making d3 svg responsive but cannot figure out how to replicate this with the sunburst chart.

We have to implement a way where we can use a separate call for each level, is that possible? if yes, please guide

Describe the bug
I've sunburst-chart integrated in a Grafana panel via a custom plugin:
https://github.com/luipir/GaliciaSustentable_deployment/blob/master/dashboards/luipir-sunburst-panel/src/SunburstPanel.tsx

if I select a voice in a dropdown menu overlapping the canvas, appear the tooltip where I clicked as the screenshot [1].
The tooltip is not removed if I reset the sunburst removing and recreating it as in screenshot [2]

IMHO would make sense:

1. remove al sunburst-tooltip div elements during init
2. better, add the tooltip to the sunburst hierarchy

To Reproduce
well reproducible only if a menu overlap the canvas. Steps to reproduce the behavior:

1. Open the menu overlapping the canvas
2. select an element that overlap the chart
3. after click, the tooltip appear (becaosue of move event)
4. Due to reset of sunburst, the tooltip does not disappear

Expected behavior
No tooltip would remain

Screenshots
[1]
[2]

Desktop:

• OS: Ubuntu
• Browser chrome, firefox
• Version chrome: Version 83.0.4103.116 (Official Build) (64-bit) - firefox: 78.0.2 (64-bit)

"schemeCategory20*" has been deprecated from latest D3 libraries.
See reference to this change here: Section - "Changes in D3 5.0" under https://github.com/d3/d3/blob/master/CHANGES.md

Please replace related code in the examples with something from this link: https://github.com/d3/d3-scale-chromatic/blob/master/README.md

I'm having trouble with displaying dynamic data, every 10s I update all the values in my data object and then call mySunburst.data(mydata);, but when I'm zoomed in the slices don't resize correctly, and I see slices from adjacent children. This is my zommed out sunburst:

When I click on slice CUL it looks like this:

then the data updates and it looks like this:

Is there something else I'm supposed to do except call data(myData) ?

Thanks

Is your feature request related to a problem? Please describe.
i want to specify nodes colors based on their position (x & y values)

Describe the solution you'd like
I was thinking that using d3.hsv to set colors would work, but I'm not sure if this is the best approach or of all the implementation details

Describe alternatives you've considered
We've looked at - http://bl.ocks.org/syntagmatic/5bbf30e8a658bcd5152b - but that looks a little less elegant/intuitive

Additional context
The top level of our widget has 4ish nodes at the moment. We'd like to specify a color range for each of those top levels, so that everything below a given parent node falls within the specified range, and that the nodes approach a specified opacity as the depth increases.

Is your feature request related to a problem? Please describe.
Yes, I need to do some extra things when user clicks on canvas/white background. Currently, I have to modify original sunburst code since there is no method exposed yet for clicking on canvas.

Describe the solution you'd like
Make public method for onClickCanvas

Describe alternatives you've considered
Modify inside code of sunburst to do some extra things when user clicks on canvas/background.

Hi vasturiano ,
I dont know how to use sunburst in react native android and ios.Can you please help me to solve this.If i any related link that may be useful for me.Thanks in advance.

got error during compilation angular 8.2 application with sunburst-chart 1.9.0 with typescript 3.5.3

ERROR in ../node_modules/sunburst-chart/dist/sunburst-chart.d.ts:75:6 - error TS2456: Type alias 'SunburstChartInstance' circularly references itself. 75 type SunburstChartInstance = SunburstChartGenericInstance<SunburstChartInstance>;

I create a new chart like so: myChart = Sunburst().data(original_data)(the_element), and everything works as expected.

However, when I subsequently call myChart.data(new_data) the labels continue to represent the values from original_data, BUT the tooltips DO update to represent the values from new_data.

How can I use focusOnNode method. From the README it's not clear. Can I catch the click event on nodes?

Hi, really like your package and it is working great so far.
What I try to achieve is to only display immediate labels and basically exactly this look and feel:
https://observablehq.com/@roshankhandelwal/sunburst

That sunburst actually was build on your work.
Im very new to D3 and observablehq is giving me a hard time to understand and copy working code outside of this notebooks, while I only need vanilla js.

Can I achieve immediate labels without forking and patching up you work in any other way?

If I disable filter then it includes all nodes which causes performance issues
If I disable filter minSliceAngle related code, then it loads all nodes which causes performance issues like clicking on node and zooming in takes more time.

Describe the solution you'd like
Is there way to improve performance without using filter ?

Is your feature request related to a problem? Please describe.
We love sunburst-chat! I have collegues who are responsible for reports and studies. They want to use sunburst-chart in a more dynamically way. They need to select color, change tooltip, change names, add/remove children - and all that without changing the index.html and reloading the browser.

Describe the solution you'd like
I would love to have a nice creator view. On the left side of the creation-page.html there is an embedded JSONEditor like https://github.com/josdejong/jsoneditor. With it the data can be changed dynamically inside the page. Every change should trigger sunburst-chart to reload. If I think it's good, I export the JSON-data.

What I also think could be really cool - embedd proofen color palettes (like https://coolors.co/palettes/trending). On the left, you can choose between color palettes and don't need to change the every color of a node.

I tried doing it directly in the chrome developer tools but I didn't find a "reload" method on the Sunburst() object. Is there one?

Describe alternatives you've considered
none

Additional context
none

like if i want to add cursor : none in second ring (for depth =0 ) and keep cursor : pointer for first ring (depth = 1)

Hello,
first of all - thanks for the great graph component and sharing it.

For our usecase all our nodes have value attribute set, but the component always counts the values as a sum of all children.

...sum(accessorFn(state.size));

I would like to skip this step and to use our value directly.

First of all, thanks for this tool. it's working out really well.

In your demo, the middle white circle is quite small. Whenever I'm using the tool, the diameter of the circle is huge. is there a way to set in manually?

Is your feature request related to a problem? Please describe.
I wanted to put text at very center node / circle every time even when you zoom in.

Describe the solution you'd like
So, I was thinking to make center node / circle transparent and put div there with some text.

Describe alternatives you've considered
There is also showLabels method but not sure, how I can use it.

Is your feature request related to a problem? Please describe.
In my project, the root node does not serve any functional purpose. Is there a way to skip the root node?

I have changed radius, so that it shows only few donuts (layers) of sunburst, but because I change radius some node are intersecting with svg boder, I wanted to hide those nodes.

How can I do that ?

I was trying to get bounding box for node after animation code in update method but it is giving me empty "d" attribute of path. "d" attribute of path updates after running everything like it completes rendering of page.

I was trying this
allSlices.select('path.main-arc').filter(d => d.data.name === 'name1').node().getBBox() in update method after this line

allSlices.select('path.main-arc').transition(transition)
      .attrTween('d', d => () => state.arc(d))
      .style('fill', d => colorOf(d.data, d.parent));

but it gives me position of very initial place, like it is not rendered yet.

If I can get position of node, then I can hide node based on location of node.

Also, can you explain, how animation works here in sunburst code, for example

// Entering + Updating
    const allSlices = slice.merge(newSlice);

    allSlices.style('opacity', 1);

    allSlices.select('path.main-arc').transition(transition)
      .attrTween('d', d => () => state.arc(d))
      .style('fill', d => colorOf(d.data, d.parent));

    allSlices.select('path.hidden-arc').transition(transition)
      .attrTween('d', d => () => middleArcLine(d));

    allSlices.select('.path-label')
      .transition(transition)
        .styleTween('display', d => () => state.showLabels && textFits(d) ? null : 'none');

    // Ensure propagation of data to children
    allSlices.selectAll('text.path-label').select('textPath.text-contour');
    allSlices.selectAll('text.path-label').select('textPath.text-stroke');

    allSlices.selectAll('text.path-label').selectAll('textPath')
      .text(d => nameOf(d.data));

Thank You,

The primary text in the tool tip is hardcoded. I'd love to be able set that myself. I'm personally not a big fan of ">". :)

Also if i choose to hide the root or zoom in there is a trailing ">". I think i get that you are trying to hint at the fact that some of the tree is hidden, but I think there are better ways to handle this. If I had control over it, i could do it my way. :)

Is your feature request related to a problem? Please describe.

Not so much a problem but an enhancement.

Describe the solution you'd like

The ability to apply a number format. As a minimum to limit number display to 2 decimal places. Ideally the ability to apply currency format with comma's per '000.

Describe alternatives you've considered

N/A

Additional context

I am not sure if there is a rounding/trimming issue within the d3 code as all my source data is limited to 2 decimal places yet various slices output show 10+ decimal places.

When we are drilling down or zooming into the sunburst chart, the hierarchical level is not shown.

A breadcrumbs showing the level of node currently focused would be ideal.

Is it possible to add the breadcrumbs as an option? So that those who need it can make use of it.

I'm facing a weird behaviour when clicking outside of the chart (but in the svg) the chart focus is resetted to the original root node, as expected, but the callback onNodeClick is not called. This leads to major issues when the chart is used in a fully-controlled usage.

Here is a fix proposition: #19

The current version displays labels with a white border. It would be nice to be able to choose the color of the label and whether or not the border will appear. Or is it already possible?
By default, the white border could be thinner, similar to https://www.highcharts.com/demo/sunburst

Describe the bug
when setting showTooltip to false - .showTooltip(false) the tooltips are correctly removed but there is a new Uncaught TypeError - state.showTooltip is not a function error on the console for ever hover event.

I have also tried .showTooltip(() => false) as per the docs for passing a function as the arg, but Typescript is complaining that a function is not assignable to boolean. I can see showTooltip(show: boolean): ChainableInstance; in the types file, so I assume it is expecting a boolean.

To Reproduce
Steps to reproduce the behavior:

1. set .showTooltip(false)
2. hover over a segment
3. notice TypeError on console.

Expected behavior
An error shouldnt be in the console. (And does the docs need updated to reflect the boolean arg and not a function?)

Screenshots

Desktop (please complete the following information):

• OS: ios
• Browser chrome
• Version [e.g. 22]

@vasturiano It is there a way to integrate sunburst-chart with Angular 2-9? I am trying this, but is not working.

import { Component, OnInit } from '@angular/core';
import Sunburst from 'sunburst-chart';
import { sbdata } from '../chart-options/sunburst-mockdata';

@Component({
  selector: 'app-sunburst',
  templateUrl: './sunburst.component.html',
  styleUrls: ['./sunburst.component.scss']
})
export class SunburstComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    const myChart: Sunburst = Sunburst();
    myChart.data(sbdata)('sbChart');
  }
}

And the .html:
<div class="card" id="sbChart"></div>

We would like to use the widget as part of a dashboard but want to specify a fixed size for it to occupy while minimizing white space.

It's unclear how to achieve a fixed radius for the circle as a whole by specifying max radius for a given level, especially because the radius for each levels scales (which is appreciated).

Ideally we'd like to specify the total radius and have the individual levels' radii inferred based on that (the total radius) and the shape of our data.

Is your feature request related to a problem? Please describe.
If the text is larger than the space, it is not displayed. It would be better to have a word wrap.

Describe the solution you'd like
Wrapping text

Describe alternatives you've considered
d3plus.textWrap()

Is there any way to resize the me main(first) node, I want to give more height to children's and less to main node

Sunburst Chart works fine in chrome but when I open my chart in firefox, the labels are missing. Everything else (rendering, transitions, tooltip,..) works fine in both browsers.
But how do I get my labels to show up in firefox?

I have a limited resolution and size of display, so it would be really useful to be able to define the number of rings that are displayed. For example, the current ring and the next ring of parameters.
Thanks

Is your feature request related to a problem? Please describe.
I wanted to do certain things/actions when user hover over to particular node of sunburst and remove those things/actions when user leaves that node (i.e. move out mouse from that node)

Describe the solution you'd like
Methods for mouseover, mouseenter, mouseleave for sunburst widget for node.

Describe alternatives you've considered
Modify inner methods to achieve above request.

Additional context
Also, will I get color information when I hover over to particular node by calling color() method ?

Would be useful to have this option.

Hi and thanks for this excellent Sunburst chart! Love it!! I am seeking for advice/help here:

I have a project to use such sunburst diagram on a website, as a NAVIGATION device, to browse a rich hierarchy of pages: like a menu replacement. It would show the whole hierarchy of the website (equivalent to a site map), allowing to drill down.

So 2 different clicks possible:

• normal click like now on sunburst section/leaf …to drill down to sub-levels of the diagram
• click on a link-or-icon inside the sector ... to jump to the corresponding webpage

Basic features needed would be:

• icon in section/leaf
• link from icon and/or special link to webpage (complementing link to si level when click on title)
• mouse over (or popover) to display a kind of preview of the leaf: rich text + picture (html popover)
• eventually image displayed in the leaf (but not sure how to: sizing not easy to define??)

Moreover, the size of the chart with quadratic calculation is not totally appropriate to such a navigation, as the percentage of each sector is not really important (compared to a data graph), rather some proportions to show more/less important sections and the center can be small to allow best readability of info (title, icon, etc)

Do you think I can achieve this with your Sunburst? Can you guide me about how to tune things up to achieve such navigation device? Many thank in advance and congrats again!

Kind regards
Yannick

As of right now, all labels have a white background that can interfere with the beautiful sunburst design. It would be amazing if you could choose to ignore the background or give it a custom color

Pardon my english and my lack of knowledge as I am new to Javascript!
I would like to know if there is any way to include different images on each "slice"?
Really appreciate the template and hope to hear from you soon!

The compiler is identifing this supposed problem:

ERROR in ../node_modules/sunburst-chart/dist/sunburst-chart.d.ts:75:6 - error TS2456: Type alias 'SunburstChartInstance' circularly references itself.

75 type SunburstChartInstance = SunburstChartGenericInstance;

to have ui friendly please add option to display back button inside center of wheel

Describe the bug
When tooltip is long, wchich is expected in sunburst chart imo, text is not wrapped.

To Reproduce
Steps to reproduce the behavior:

1. Use dataset with a couple of longer values - typical use case like showing paths journey through website.
2. Hover on chart to see not wrapped tooltips.

Expected behavior
Text should be wrapped, or at least it should have dark background under all letters. Not like right now. Ideally user could have an option to wrap long text or truncate it, although I don't really see a reason to truncate text in tooltip.

Screenshots

Desktop (please complete the following information):

• OS: Win10
• Browser Chrome
• Version 81

I don't think it connects to #39 - that issue is not described very well but I guess it's about something different - text on tooltips is shown, it just leaks outside of background box.

Could not find a declaration file for module 'sunburst-chart'. 'c:/Users/xyzUser/testUI/node_modules/sunburst-chart/dist/sunburst-chart.common.js' implicitly has an 'any' type.

Try npm install @types/sunburst-chart if it exists or add a new declaration (.d.ts) file containing declare module 'sunburst-chart';ts(7016)

Describe the bug
I created sunburst object, and later on I use that sunburst object to call focusOnNode method.
But it gives me JavaScript error. It gives error at line 146: https://github.com/vasturiano/sunburst-chart/blob/master/src/sunburst.js#L146 which says state.focusOnNode have no/null __dataNode property.

To Reproduce
Steps to reproduce the behavior:

1. someButton.on('click', (d: any) => this.sunburst.focusOnNode(d.data.__dataNode); )
   where d is following:
   
2. which causes line 146 of https://github.com/vasturiano/sunburst-chart/blob/master/src/sunburst.js#L146 to say that state.focusOnNode 's __dataNode has undefined which means state.focusOnNode.__dataNode.y0 gives error.
   
3. even if I call with just this.sunburst.focusOnNode(d); , it still gives same error.

Expected behavior
No JavaScript error and sunburst should focus on node which I pass to focusOnNode function.

Screenshots
Provided above

Desktop (please complete the following information):

• OS: Windows 10
• Browser: chrome
• Version: 76

I want to know how to update because when i call the creation again with new values, nothing happens

Every 1 minute I update this data1 and call this code again
Sunburst()
.data(data1)
.size('size')
.color('color')
.width(500)
(document.getElementById('chart'));

Current version just shows labels in horizontal position. It would be nice to add detection to show labels vertically if possible.
Similar to highcharts sunburst chart - please see https://www.highcharts.com/demo/sunburst

Describe the solution you'd like
I would like to be able to control color of all arcs on hover. E.g. make all arc other than hovered whitened, and change the color of hovered arc at the same time.

Additional context
Thanks to reaching out to @vasturiano I know that we can do something like this:
myChart.onHover(hoveredArc => myChart.color(arc => arc === hoveredArc ? 'purple' : 'white'));

I have a follow up question - is there anything we can do to change color immediately duringHover, without default opacity?

I tried overwriting css classes like this (scss, they get assigned properly - I verified this in devtools):

.sunburst-viz {
  .main-arc {
    transition: none !important;

    &:hover {
      transition: none !important;
    }
  }
}

It doesn't seem to change anything.

Hello, until this afternoon, i was using this script for work and since then, i can't load it again to use it.
On my bowser network i can see that the script page return a 404 not found.
Can you help me or confirm that the script is dead.

Thx

I am trying to clear out the sunburst chart, but it won't.
The data comes from an api call, and if it gets back no data, I want it to be empty.

The data updates fine when I have more data, but not when I have no data.
I have tried the following

this.hierarchySunburstChart.data(null)  // doesn't update
                        
this.hierarchySunburstChart.data({})  
// turns black and produces a lot of console errors saying:
// ERROR TypeError: Cannot read property 'toString' of undefined
                        
this.hierarchySunburstChart.data() // doesn't update
                        
this.hierarchySunburstChart.data(undefined) // doesn't update

I am using v1.2.2 in Angular 5 on Chrome.

How can I use onNodeClick method. From the README it's not clear. Can I catch the click event on nodes?