如何添加到可缩放冰柱d3图的文本？ [英] How to add to text to the Zoomable Icicle d3 graph?

问题描述

如何在此图形的矩形中添加文本？​​

How to add text to the rects in this graph?

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

推荐答案

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); });
    }
});

这篇关于如何添加到可缩放冰柱d3图的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！