2

私はD3を初めて使用し、 http：//bl.ocks.org/mbostock/4063423のサンバーストの例を拡張して、各アークにテキストラベルを追加しようとしています。静的なグラフの場合は簡単で、このコードではラベルが正しく配置されていますが、例と同じように、円弧のサイズを変更するトランジションを追加すると、テキストラベルは移動しません。

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

対応する円弧で移動するために、ラベルの移動を実装するにはどうすればよいですか？

よろしく、ジョアン

4

1 に答える 1

4

いくつか試してみたところ、ラベルを更新するためにも関数の変更が必要であることがわかりました。この呼び出しを追加するだけで問題は解決しました。

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

今では動作します。

于 2013-02-25T07:56:11.613 に答える