Javascript 如何将文本添加到可缩放的冰柱d3图形中？

如何将文本添加到此图中的矩形

---

是的，确实如此——文本的转换也非常有效。但您可能需要编辑文本的坐标函数以使其居中（例如）——如果您想这样做，更重要的是，您可能需要更改设置自定义子函数以及更新分区对象上的值函数。是否有人可以与原始可缩放冰柱代码共享上述代码blurb的执行位置？或者更好的做法是，发布一个指向整个代码的链接？我正在努力解决这个问题。谢谢

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