CODEWITHSUNDEEP
javascriptd3.jscallbacktransition
user4815162342
user4815162342

Reputation: 1688

Passing a function to d3's .data()

This suburst with updating data makes a call path.data(partition.value(value).nodes), where partition is a d3.layout.partition with the value() function used to layout the nodes. Initially, data is passed to path through svg.datum(root), but in both the first call and on the input change, only the function partition.nodes is passed to data().

I am assuming data() then just accesses what is already bound to the element, but I wanted clarification, as path is defined as the enter group, how exactly this is done behind the scenes. Thank you! Code excerpt below. 

var partition = d3.layout.partition()
    .sort(null)
    .value(function(d) { return 1; });

d3.json("/d/4063550/flare.json", function(error, root) {
  node = root;
  var path = svg.datum(root).selectAll("path")
      .data(partition.nodes)
    .enter().append("path")
     ...


  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return d.size; };

    path
        .data(partition.value(value).nodes)
      .transition()
        .duration(1000)
        .attrTween("d", arcTweenData);
  });

Upvotes: 2

Views: 797

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

To understand what's happening here, it's useful to have a look at the nested selection tutorial. Although it's not the same kind of use case here, this is technically what it is -- the initial data is passed on to the later call to .data().

The general pattern for nested selections is .data(function(d) { return ...; }). This is what's happening here as well; the long version of the above code would be

path.data(function(d) { return partition.value(value).nodes(d); })

where d is the data bound to the parent node, root.

Upvotes: 1

Related Questions