Question

我是d3的初学者，仍然需要学习很多东西。我想编写一个带有超链接切片的动画饼图。我目前的解决方案不是很优雅和干净。我已将数据绑定到“切片”组 - 在每次更新数据时，“切片”组都会被D3刷新。

但是我必须手动删除href元素，并且在href元素下面是饼图中的路径元素...所以我会以一种艰难的方式删除路径元素。

如何实现我的Update-Function，我最后可以拥有这样的动画： 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>
....

Answer 1

您可以而且应该避免以您提到的方式编写超链接。

更好的方法是创建点击处理程序，类似于:(代码来自另一个项目，我附加它用于演示目的，你当然可以轻松调整它）

  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();
      });

饼图与动画和超链接切片

1 个答案: