如何在转换中移动文本标签 [英] How to move text labels in transition

问题描述

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

I'm new to D3 and I'm trying to extend the sunburst example in http://bl.ocks.org/mbostock/4063423 just adding text labels to each arc. Is easy for an static chart, and in this code labels are correctly located, but when I add a transition, the same than in example, that resizes the arcs, the text labels don't move.

<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>

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

How can I implement the label movement, just to move with the corresponding arc ?

尊敬的，
Joan

Regards, Joan

推荐答案

发现在功能更改时也需要更新标签，只需添加此调用即可解决问题：

After trying several things, I've found that in function change is necessary also to update labels, just adding this call has solved the problem:

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

现在可以了。

这篇关于如何在转换中移动文本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！