Question

我是D3的新手，我正在尝试在http://bl.ocks.org/mbostock/4063423中扩展sunburst示例，只需为每个弧添加文本标签。对于静态图表很容易，并且在此代码标签中找到了正确的位置，但是当我添加一个过渡时，与调整弧的大小相同的过渡时，文本标签不会移动。

<script type="text/javascript">

    function onload() {     
        var container = document.querySelector("#graph");
        var width  = $(container).width(),  
            height = 700,
            radius = Math.min(width, height) / 2,
            color  = d3.scale.category20c();

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

        var partition = d3.layout.partition()
            .sort(null)
            //.size([2 * Math.PI, radius * radius])
            .size([2 * Math.PI, 100000])
            // criteri per defecte: Importància
            .value(function(d) { return d.size; });

        var arc = d3.svg.arc()
            .startAngle(function(d) { return d.x; })
            .endAngle(function(d) { return d.x + d.dx; })
            .innerRadius(function(d) { return Math.sqrt(d.y); })
            .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

          d3.json("data/CV.json", function(error, root) {
          var arcs = svg.datum(root).selectAll("path")
              .data(partition.nodes)
              .enter().append('svg:g');

          var path = arcs.append("path")
              .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
              .attr("d", arc)
              .style("stroke", "#fff")
              .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
              .style("fill-rule", "evenodd")
              .each(stash);     

         var label = arcs.append("svg:text")
            .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .attr("class", "label")
            .attr("style", function(d) { return d.depth ? null : "display: none"; }) // hide inner
            .text(function(d) { return d.name; });

          d3.selectAll("input").on("change", function change() {
            var value = this.value === "count"
                ? function() { return 1; }
                : function(d) { return d.size; };

            path
                .data(partition.value(value).nodes)
              .transition()
                .duration(1500)
                .attrTween("d", arcTween);

          });
        });

        // Stash the old values for transition.
        function stash(d) {
          d.x0 = d.x;
          d.dx0 = d.dx;
        }

        // Interpolate the arcs in data space.
        function arcTween(a) {
          var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
          return function(t) {
            var b = i(t);
            a.x0 = b.x;
            a.dx0 = b.dx;
            return arc(b);
          };
        }

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

</script>

如何实现标签移动，只需移动相应的弧线？

此致琼

Answer 1

在尝试了几件事之后，我发现在功能更改中也需要更新标签，只需添加此调用就可以解决问题：

label
     .data(partition.value(value).nodes)
   .transition()
     .duration(1500)
     .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
     });

现在可行。

如何在转换中移动文本标签

1 个答案: