NVD3 Sunburst chart is not updated with new data/latest data

[nounla]

Hi, I am using NVD3 sunburst chart and we will get the chart dynamically by selecting some parameters and time range. if we change the time range and parameters, we are getting latest data but the chart is not rendering new data or chart is not updated. any suggestions to render chart with new data?

[liquidpele]

try using the latest master branch I think someone contributed and added the update function to it but it was not in the last version

[nounla]

I checked the latest also but whatever is in earlier version i see in latest version

        chart.update = function() {
            if (duration === 0)
                container.call(chart);
            else
                container.transition().duration(duration).call(chart)
        };

I dont see any new code change related to update. can you give me any suggestion, how can we achieve this?

[Crenshinibon]

I have seen the pull request #1272 that was supposed to fix the issue, but it's not working for me either. I build the js file from the master branch this afternoon.

[Crenshinibon]

I'm trying to pinpoint the problem, but I don't really understand how that stuff is supposed to work (I'm taking pieChart as the reference). What I can tell is that the __data__ in the container is updated, BUT that the objects there aren't 'enriched' with the usual coordinates.

Which part of the 'chart' function is supposed to calculate that layouting stuff?

[Crenshinibon]

My current workaround is to 'clear' the graph: updating with data = undefinedand then update it with the data I actually like to display. It's not really pretty, but that's not that important for me.

Here is the actual Meteor code. Maybe it's helping:

if Meteor.isClient
  @chart  = nv.models.sunburstChart()
    .color (e1) -> 'black'
    .groupColorByParent false
    .mode 'size'

  @updateChart = (data) ->
    selected = d3.select '#sunburst'
    selected.datum(data).call chart
    chart.update()

  Template.sunburst.onRendered  () ->
    nv.addGraph () ->
      updateChart()
      chart

    this.autorun () ->
      size = _sizeSelection.get()
      filter = _filter.get().filterDef
      hierarchy = _hierarchySteps.find().fetch()

      Meteor.call 'getSunburstData', size, filter, hierarchy, (e, r) ->
        if e? or not r?
          console.log e, r
        else
          updateChart()
          updateChart [r]

[Crenshinibon]

@nounla I made this work (https://github.com/novus/nvd3/pull/1343) and added labels as well. It might be incorporated soon. So long you might want to give it a try: https://github.com/crenshinibon/nvd3

Here is the 1.8.1 version plus the sunburst fixes: https://drive.google.com/file/d/0B5ilvrG3knnhZXdZZlJQY19Rd2c/view?usp=sharing

[simonwfarrow]

Hi, I cloned your repo and build the code, the sunburstChart doesn't appear to draw all paths - my test data is 5 levels deep, some nodes go the whole depth, some don't and some appear to have the lowest leaf but not the intermediate leafs

[Crenshinibon]

@simonwfarrow is it possible, that your data contains negative values (sizes)? All values have to be positive.

If that's not helping, please provide your source code.

Regards Dirk

[simonwfarrow]

@Crenshinibon I'm using Math.random() * 1000 to generate test values so they can't be negative. I am however using angular-nvd3 as wrapper to nvd3. The same code works with version 1.8.1 from the main repo. Looking at the data and what leafs are displayed, it seems it may be that only unique names are drawn. Data below:

var random = function(){
    return parseInt(Math.random() * 1000);
}
 var refreshData = function() {
    return [{
    "name": "Schemes",
    "children": [
      {
        "name": "ABC",
        "children": [
          {
            "name": "Dom",
            "children": [
              {
                "name": "Gate-01",
                "children": [
                  {"name": "123","size": random()},
                  {"name": "456", "size": random()},
                  {"name": "789","size": random()},
                  {"name": "1011","size": random()},
                  {"name": "1213","size": random()},
                  {"name": "1415","size": random()},
                  {"name": "1617","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "2021","size": random()},
                  {"name": "2223","size": random()},
                  {"name": "2425","size": random()},
                  {"name": "2627","size": random()},
                  {"name": "2829","size": random()},
                  {"name": "3031","size": random()},
                  {"name": "3233","size": random()},
                  {"name": "3435","size": random()},
                  {"name": "3637","size": random()},
                  {"name": "3839","size": random()},
                ]
              },
              {
                "name": "Gate-02",
                "children": [
                  {"name": "123","size": random()},
                  {"name": "456", "size": random()},
                  {"name": "789","size": random()},
                  {"name": "1011","size": random()},
                  {"name": "1213","size": random()},
                  {"name": "1415","size": random()},
                  {"name": "1617","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "2021","size": random()},
                  {"name": "2223","size": random()},
                  {"name": "2425","size": random()},
                  {"name": "2627","size": random()},
                  {"name": "2829","size": random()},
                  {"name": "3031","size": random()},
                  {"name": "3233","size": random()},
                  {"name": "3435","size": random()},
                  {"name": "3637","size": random()},
                  {"name": "3839","size": random()},
                ]
              }
            ]
          },
          {
            "name": "Int",
            "children": [
              {
                "name": "Gate-03",
                "children": [
                  {"name": "123","size": random()},
                  {"name": "456", "size": random()},
                  {"name": "789","size": random()},
                  {"name": "1011","size": random()},
                  {"name": "1213","size": random()},
                  {"name": "1415","size": random()},
                  {"name": "1617","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "2021","size": random()},
                  {"name": "2223","size": random()},
                  {"name": "2425","size": random()},
                  {"name": "2627","size": random()},
                  {"name": "2829","size": random()},
                  {"name": "3031","size": random()},
                  {"name": "3233","size": random()},
                  {"name": "3435","size": random()},
                  {"name": "3637","size": random()},
                  {"name": "3839","size": random()},
                ]
              },
              {
                "name": "Gate-04",
                "children": [
                  {"name": "123","size": random()},
                  {"name": "456", "size": random()},
                  {"name": "789","size": random()},
                  {"name": "1011","size": random()},
                  {"name": "1213","size": random()},
                  {"name": "1415","size": random()},
                  {"name": "1617","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "2021","size": random()},
                  {"name": "2223","size": random()},
                  {"name": "2425","size": random()},
                  {"name": "2627","size": random()},
                  {"name": "2829","size": random()},
                  {"name": "3031","size": random()},
                  {"name": "3233","size": random()},
                  {"name": "3435","size": random()},
                  {"name": "3637","size": random()},
                  {"name": "3839","size": random()},
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "DEF",
        "children": [
          {
            "name": "Dom",
            "children": [
              {
                "name": "Gate-01",
                "children": [
                  {"name": "123","size": random()},
                  {"name": "456", "size": random()},
                  {"name": "789","size": random()},
                  {"name": "1011","size": random()},
                  {"name": "1213","size": random()},
                  {"name": "1415","size": random()},
                  {"name": "1617","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "2021","size": random()},
                  {"name": "2223","size": random()},
                  {"name": "2425","size": random()},
                  {"name": "2627","size": random()},
                  {"name": "2829","size": random()},
                  {"name": "3031","size": random()},
                  {"name": "3233","size": random()},
                  {"name": "3435","size": random()},
                  {"name": "3637","size": random()},
                  {"name": "3839","size": random()},
                ]
              },
              {
                "name": "Gate-02",
                "children": [
                  {"name": "123","size": random()},
                  {"name": "456", "size": random()},
                  {"name": "789","size": random()},
                  {"name": "1011","size": random()},
                  {"name": "1213","size": random()},
                  {"name": "1415","size": random()},
                  {"name": "1617","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "2021","size": random()},
                  {"name": "2223","size": random()},
                  {"name": "2425","size": random()},
                  {"name": "2627","size": random()},
                  {"name": "2829","size": random()},
                  {"name": "3031","size": random()},
                  {"name": "3233","size": random()},
                  {"name": "3435","size": random()},
                  {"name": "3637","size": random()},
                  {"name": "3839","size": random()},
                ]
              }
            ]
          },
          {
            "name": "Int",
            "children": [
              {
                "name": "Gate-03",
                "children": [
                  {"name": "123","size": random()},
                  {"name": "456", "size": random()},
                  {"name": "789","size": random()},
                  {"name": "1011","size": random()},
                  {"name": "1213","size": random()},
                  {"name": "1415","size": random()},
                  {"name": "1617","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "2021","size": random()},
                  {"name": "2223","size": random()},
                  {"name": "2425","size": random()},
                  {"name": "2627","size": random()},
                  {"name": "2829","size": random()},
                  {"name": "3031","size": random()},
                  {"name": "3233","size": random()},
                  {"name": "3435","size": random()},
                  {"name": "3637","size": random()},
                  {"name": "3839","size": random()},
                ]
              },
              {
                "name": "Gate-04",
                "children": [
                  {"name": "123","size": random()},
                  {"name": "456", "size": random()},
                  {"name": "789","size": random()},
                  {"name": "1011","size": random()},
                  {"name": "1213","size": random()},
                  {"name": "1415","size": random()},
                  {"name": "1617","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "1819","size": random()},
                  {"name": "2021","size": random()},
                  {"name": "2223","size": random()},
                  {"name": "2425","size": random()},
                  {"name": "2627","size": random()},
                  {"name": "2829","size": random()},
                  {"name": "3031","size": random()},
                  {"name": "3233","size": random()},
                  {"name": "3435","size": random()},
                  {"name": "3637","size": random()},
                  {"name": "3839","size": random()},
                ]
              }
            ]
          }
        ]
      }

    ]

  }];
};

[Crenshinibon]

Oh. Yes. That's true. I have changed that. Since this is necessary to identify the arc in order to update it when the underlying data changes, e.g. it's not part of the data anymore, it's size has changed.

Make sure that all distinct data points have a unique identifier. You could introduce an extra field and configure the chart to use that as the identifier.

[simonwfarrow]

Ah I see, thanks. Would it be possible to have the code expect an id property in the data set and use this if present? Otherwise defaulting to name?

[Crenshinibon]

It works (almost) this way. You can explicitly tell the chart where to look for the 'id'. If not, the 'name' attribute is used.

I'm initializing my chart this way (in CS), especially notice the last function call to key():

@sunburstChart = nv.models.sunburstChart()
  .color (d) ->
    color
      id: d
      label: d
  .groupColorByParent false
  .showLabels true
  .labelFormat (d) ->
    text = "#{d.name} (#{Math.round(d.value)} PT)"
    if d.value is 0
      text = ''
    else if Math.abs(d.value) > 210
      text = "#{d.name} (#{Math.round((d.value / 210)*10)/10} PJ)"
    text
  .mode 'value'
  .key (d) ->
    d._id

[simonwfarrow]

Perfect, thanks very much - successfully passed in

suburst:{
    key: function(d){return d.id}
}

via the $scope.options of angular-nvd3

btw - the labels are ace.