CODEWITHSUNDEEP
d3.js
ee2Dev
ee2Dev

Reputation: 1998

Partition layout with different value functions

I am trying to implement the partition layout and have the user decide upon the value function. A radio button marks the currently used attribute which is passed on to the value function.

A working implementation by Mike Bostock (for sunburst) is here: http://bl.ocks.org/mbostock/4063423

My example (see JSFiddle: http://jsfiddle.net/ee2todev/3tsogbz6/ )tries to follow that implementation but something goes wrong: The first change on the radio button seems fine, but the second click on the radio button leads to a wrong result. To better see what goes wrong, I color coded the leaves which should stay leaves (on the right side).

The point I am missing must be in the update/transition after setting the new value function:

  d3.selectAll("input").on("change", function change() {
    var value;

    switch(this.value) {
      case "count":
        value = function() { return 1; }
        break;
      case "size1":
        value = function(d) { return d.values.size1; };
        break;
      case "size2":
        value = function(d) { return d.values.size2; };
        break;
    }

    d3.selectAll("g.main")
        .data(partition.value(value).nodes(root))
      .transition();
    console.log(root);  
  });

Any help is greatly appreciate

** update** Even the first click on the radio button seem to produce wrong results. I must be missing something simple !?...

Upvotes: 2

Views: 672

Answers (1)

suDocker
suDocker

Reputation: 8534

The mapping between the data model and the DOM elements will change everytime you call .data() on the selection. So, this means, all the attributes needs to be updated in click function

    t.select("rect")
        .attr("width", d.dy * kx)
        .attr("height", function(d) { return d.dx * ky; })
        .attr("class", function(d) { return d.children ? "innerNode" : "leaf"; });

    t.select("text")
        .attr("transform", transform)
        .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
        .text(function(d) { return d.key; });

Notice I have set even the class for the rectangle and the text for the text element.

Here is the working version: http://jsfiddle.net/4v62v9g3/

Upvotes: 1

Related Questions