Question

我试图用文字显示森伯斯特。我使用了sunburst示例中的代码并尝试向其添加文本（工作），但是当它更新时，我的文本消失了。我只能在加载时显示所有文本或文本，然后才能显示文本。因此，当它更新时，文本消失或与数据不同步。

任何人都可以告诉我出了什么问题，因为我不知道了。

原始代码：http://bl.ocks.org/mbostock/4348373

我的适应性：

    var width = 1060,
    height = 900,
    radius = Math.min(width, height) / 2;

var x = d3.scale.linear()
    .range([0, 2 * Math.PI]);

var y = d3.scale.sqrt()
    .range([0, radius]);

var color = d3.scale.category20c();

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");

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

var arc = d3.svg.arc()
    .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
    .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
    .innerRadius(function(d) { return Math.max(0, y(d.y)); })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

d3.json("http://localhost:50043/data.json", function (error, root) {
    if (error) throw error;
    var data = partition.nodes(root);

    var path = svg.selectAll("path")
        .data(partition.nodes(root))
        .enter()
        //.append("g");
        .append("path")
        //.attr("display", function (d) { return d.depth ? null : "none"; })
        .attr("d", arc)
        .style("fill", function (d) { return color((d.children ? d : d.parent).name); })
        .on("click", click);

    var text = svg.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .classed("label", true)
        .attr("x", function (d) { return d.x; })
        .attr("text-anchor", "middle")
        // translate to the desired point and set the rotation
        .attr("transform", function (d) {
            if (d.depth > 0) {
                return "translate(" + arc.centroid(d) + ")" +
                    "rotate(" + getAngle(d) + ")";
            } else {
                return null;
            }
        })
        .attr("dx", "6") // margin
        .attr("dy", ".35em") // vertical-align
        .attr("pointer-events", "none")
        .text(function (d) { return d.name; });

    function click(data) {
        text.remove();
        text = svg.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .classed("label", true)
            .attr("x", function(d) { return d.x; })
            .attr("text-anchor", "middle")
            // translate to the desired point and set the rotation
            .attr("transform", function(d) {
                if (d.depth > 0) {
                    return "translate(" + arc.centroid(d) + ")" +
                        "rotate(" + getAngle(d) + ")";
                } else {
                    return null;
                }
            })
            .attr("dx", "6") // margin
            .attr("dy", ".35em") // vertical-align
            .attr("pointer-events", "none")
            .text(function (d) { return d.name; });

        path.transition()
            .duration(750)
            .attrTween("d", arcTween(data));
    }

    function getAngle(d) {
        // Offset the angle by 90 deg since the '0' degree axis for arc is Y axis, while
        // for text it is the X axis.
        var thetaDeg = (180 / Math.PI * (arc.startAngle()(d) + arc.endAngle()(d)) / 2 - 90);
        // If we are rotating the text by more than 90 deg, then "flip" it.
        // This is why "text-anchor", "middle" is important, otherwise, this "flip" would
        // a little harder.
        return (thetaDeg > 90) ? thetaDeg - 180 : thetaDeg;
    }

    function arcTween(d) {
        var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
            yd = d3.interpolate(y.domain(), [d.y, 1]),
            yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
        return function (d, i) {
            return i
                ? function (t) { return arc(d); }
                : function (t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
        };
    }
});

d3.select(self.frameElement).style("height", height + "px");

更新：您可以在https://github.com/KenBonny/D3-Chart-Test找到我的代码您可以在github页面上查看手工作品：https://kenbonny.github.io/D3-Chart-Test/

Answer 1

这是因为您没有传递任何数据来点击

wirte function click（）{而不是函数click（data）{

我觉得它会起作用

D3JS Sunburst没有更新文本

1 个答案: