Question

我有一个饼图，它只会画一次。我是从Mike Bostock's pie chart example得到的。我是D3的新手，我无法弄清楚为什么它不会重绘。我看到this关于重新绘制条形图的帖子，但由于某种原因，这种技术在我的饼图上不起作用。我确定我做错了。

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

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

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

function drawChart(error, data) {
  console.log("here");

  data.forEach(function(d) {
    d.percent = +d.percent;
  });

  var g = svg.selectAll(".arc")
      .data(pie(data))
      .enter()
      .append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { 
    console.log("inside path"); 
    return d.data.color;
  });

  g.append("text")
      .attr("transform", function(d) { console.log("inside transform", d);return "translate(" + arc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.data.color; });

}

drawChart(undefined, [{"color": "green", "percent": 50}, {"color": "red", "percent": 50}]);

setTimeout(function () {
  drawChart(undefined, [{"color": "green", "percent": 75}, {"color": "red", "percent": 25}]);
}, 1000)

here's the jsbin

Answer 1

问题1：

您正在将d属性添加到DOM g，这是错误的。

<g class="arc" d="M-240,2.939152317953648e-14A240,240 0 0,1 -4.408728476930471e-14,-240L0,0Z">
      <path d="M-9.188564877424678e-14,240A240,240 0 1,1 1.6907553595872533e-13,-240L0,0Z" style="fill: red;">
</path>
      <text transform="translate(-120,-9.188564877424678e-14)" dy=".35em" style="text-anchor: middle;">red</text>
</g>

d属性仅适用于不适用于g的路径。

所以此行不正确

g.transition().duration(750).attrTween("d", arcTween); // redraw the arcs

问题2：

您的更新功能不正确（原因问题1）

function update (data) {
    console.log("here", data);
    var value = this.value;
    g = g.data(pie(data)); // compute the new angles
    g.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  };

在我看来，您应该再次调用drawChart函数进行更新。除了你删除这样的旧g组。

svg.selectAll(".arc").remove();

优点是我们使用相同的代码进行创建和更新（DRY）。所以你的超时功能就像thsi

setTimeout(function () {
  drawChart(undefined, [{"color": "green", "percent": 75}, {"color": "red", "percent": 25}]);
}, 2000);

完整的工作代码here

希望这有帮助！

d3饼图不会重新报名

1 个答案: