0

How to add text to the rects in this graph?

http://bl.ocks.org/mbostock/1005873

VividD
  • 10,456
  • 6
  • 64
  • 111
Isaac
  • 2,701
  • 4
  • 30
  • 47

1 Answers1

2
var margin = {top: 40, right: 40, bottom: 40, left: 40},
    w = 0.5 * D3_WIDTH - margin.left - margin.right,
    h = 0.25 * D3_HEIGHT - margin.top - margin.bottom,
    x_range = d3.scale.linear().range([0, w]),
    y_range = d3.scale.linear().range([0, h]),
    color = d3.scale.category20c();

var vis = d3.select('#divName').append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");

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

d3.json(jsonRequestUrl, function(json) {
    var data = partition(json);
    var rect = vis.selectAll("rect").data(data).enter()
     .append("svg:rect")
     .attr("x", function(d) { return x_range(d.x); })
     .attr("y", function(d) { return y_range(d.y); })
     .attr("width", function(d) { return x_range(d.dx); })
     .attr("height", function(d) { return y_range(d.dy); })
     .attr("fill", function(d) {return color(d.name);})
     .style("cursor", "pointer")
     .on("click", click);
    var fo = vis.selectAll("foreignObject").data(data).enter()
     .append("svg:foreignObject")
     .attr("x", function(d) { return x_range(d.x); })
     .attr("y", function(d) { return y_range(d.y); })
     .attr("width", function(d) { return x_range(d.dx); })
     .attr("height", function(d) { return y_range(d.dy); })
     .style("cursor", "pointer")
     .text(function(d) { return d.name })
     .on("click", click);

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

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

        fo.transition()
            .duration(750)
            .attr("x", function(d) { return x_range(d.x); })
            .attr("y", function(d) { return y_range(d.y); })
            .attr("width", function(d) { return x_range(d.x + d.dx) - x_range(d.x); })
            .attr("height", function(d) { return y_range(d.y + d.dy) - y_range(d.y); });
    }
});
Isaac
  • 2,701
  • 4
  • 30
  • 47
  • Yes, it does -- the transitions of text are also working pretty well. But you may want to edit the coordinates functions for text to center them (for example) -- if that's something you want to do. – Isaac May 28 '13 at 18:12
  • more importantly, you may need to change set a custom children function as well as update the value function on the partition object – Isaac May 28 '13 at 18:33
  • Can someone share where the above code blurb goes in conduction with the original zoomable icicle code? Or better, post a link to the entirety of the code? I'm struggling with this. Thanks! – user770901 Apr 13 '15 at 02:20