CODEWITHSUNDEEP
javascriptd3.jsicicle-diagram
climboid
climboid

Reputation: 6962

d3js partition icicle chart modified


So I'm trying to modify the Zoomable Icicle chart from this link so that I can have exactly the same but the last nodes, the light green ones stack on top of each other instead of next to each other. This has been quite complicated for me because the logic of the icicle chart would have to break only at this point. Being able to reference this point could so far only be given by the d.depth property of d. Still I'm trying to find if there is a more elegant solution.
This is the code for the Zoomable partition Icicle

var width = 960,
height = 250;

var x = d3.scale.linear()
.range([0, width]);

var y = d3.scale.linear()
.range([0, height]);

var color = d3.scale.category20c();

var vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);

var partition = d3.layout.partition()
.value(function(d) { return d.size; });

d3.json("../data/flare.json", function(json) {
  var rect = vis.data([json]).selectAll("rect")
  .data(partition.nodes)
.enter().append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y); })
  .attr("width", function(d) { return x(d.dx); })
  .attr("height", function(d) { return y(d.dy); })
  .attr("fill", function(d) { return color((d.children ? d : d.parent).name); })
  .on("click", click);

  function click(d) {
    x.domain([d.x, d.x + d.dx]);
    y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);

    rect.transition()
      .duration(750)
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
      .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
  }
});

All of my attributes x,y, width and height would have to have a different logic in order to create stacked rectangles I believe... but how can I determine that? Any help is much appreciated. Thanks!

Upvotes: 0

Views: 1548

Answers (1)

seliopou
seliopou

Reputation: 2916

Try transforming the data in such a way that the visualization code will draw it correctly without modification. If I understand correctly, you're trying to display the children of a node in place of the node itself. This code snippet will reparent all children of the target node to the target node's parent and then delete the target node (assuming the target node is child of the root node called 'node'):

d3.json("../data/flare.json", function(json) {
    d3.keys(json['node']).forEach(function(e) {
        json[e] = json['node'][e];
    });
    json['node'] = null

    /* the rest of the vis code */
});

Hope this helps.

Upvotes: 0

Related Questions