0

私は d3 の初心者で、まだ多くのことを学ばなければなりません。ハイパーリンクされたスライスを含むアニメーションの円グラフをコーディングしたいと思います。私の現在のソリューションは、あまりエレガントでクリーンではありません。データを「スライス」グループにバインドしました。データが更新されるたびに、「スライス」グループが D3 によって更新されます。

しかし、href要素を「手で」削除する必要があり、その要素の下にhrefはパイからのパス要素があります...そのため、パス要素を難しい方法で削除します。

最後にこのようなアニメーションを表示できる更新機能を実装するにはどうすればよいですか: http://bl.ocks.org/mbostock/1346410 (ベストプラクティス?)

function initPieChart() {
    var radius = Math.min(width, height) / 2;

    pie = d3.layout.pie()
        .sort(null)
        .value(function (d) { return d.Value; });

    color = d3.scale.category20();

    arc = d3.svg.arc()
        .startAngle(function (d) { return d.startAngle; })
        .endAngle(function (d) { return d.endAngle; })
        .innerRadius(0)
        .outerRadius(radius);

    svg_pie = d3.select("#pieChart").append("svg:svg")
        .attr("width", width)
        .attr("height", height);

    svg_rect = d3.select("#rects").append("svg:svg")
        .attr("width", width)
        .attr("height", height);

    pie_holder = svg_pie.append("svg:g")
        .attr("class", "pie_holder")
        .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

}

function updatePieChart() {

    var slice_group = pie_holder.selectAll("g.slice").data(newPieData);
    slice_group.enter().append("svg:g");
    slice_group.attr("class", "slice");
    slice_group.exit().remove();

    slice_group.selectAll("a").remove();
    var slice_link = slice_group.append("svg:a")
        .attr("xlink:href", "http://stackoverflow.com");
    var slice_path = slice_link.append("svg:path")
        .attr("stroke", "white")
        .attr("stroke-width", 0.5)
        .attr("fill", function (d, i) { return color(i); })
        .attr("d", arc);

}


....
    <g class="pie_holder" transform="translate(480,250)">
      <g class="slice">
        <a xlink:href="http://stackoverflow.com">
          <path stroke="white" stroke-width="0.5" fill="#1f77b4" d="M1.5307579422779716e-14,-250A250,250 0 1,1 -20.289681381857783,249.1752973900557L0,0Z"></path>
          <title>Kst.1 119</title>
        </a>
      </g>
....
4

1 に答える 1

0

あなたが言及した方法でハイパーリンクをコーディングすることは避けてください。

より良い方法は、これに似たクリック ハンドラーを作成することです: (コードは別のプロジェクトからのものです。デモ用に添付します。もちろん簡単に調整できます)。

  var node = vis.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); })
      .style("cursor", "pointer")
      .on("click", function() {
          window.open("http://www.stackoverflow.com", '_blank').focus();
      });
于 2014-01-07T05:47:18.890 に答える