向D3.js中的动画饼图添加新细分 [英] Adding new segments to a Animated Pie Chart in D3.js

问题描述

我无法将段添加到D3.js饼图。我知道我需要使用 .enter（）和 .append（）来暂存新数据 -

I am unable to add a segment to a D3.js pie chart. I know I need to use .enter() and .append() to stage the new data -- but I am not sure how to apply that when I have the arcs grouped (which I need for the labels).

这是我的更新函数：

var updateChart = function(dataset) {
  arcs.data(donut(dataset));
  arcs.transition()
    .duration(duration)
    .attrTween("d", arcTween);
  sliceLabel.data(donut(dataset));
  sliceLabel.transition()
    .duration(duration)
    .attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; })
    .style("fill-opacity", function(d) {
      if (d.value === 0) { return 1e-6; }
      else { return 1; }
    });
};

如何设置初始图表：

var arc = d3.svg.arc()
  .innerRadius(radius * .4)
  .outerRadius(radius);
var svg = d3.select("body")
  .append("svg")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var arc_grp = svg.append("g")
  .attr("class", "arcGrp")
  .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
var label_group = svg.append("g")
  .attr("class", "lblGroup")
  .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

var arcs = arc_grp.selectAll("path")
  .data(donut(data));
arcs.enter()
  .append("path")
  .attr("stroke", "white")
  .attr("stroke-width", 0.8)
  .attr("fill", function(d, i) { return color(i); })
  .attr("d", arc)
  .each(function(d) { return this.current = d; });

var sliceLabel = label_group.selectAll("text")
  .data(donut(data));
sliceLabel.enter()
  .append("text")
  .attr("class", "arcLabel")
  .attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; })
  .attr("text-anchor", "middle")
  .style("fill-opacity", function(d) {
    if (d.value === 0) { return 1e-6; }
    else { return 1; }
  })
  .text(function(d) { return d.data.label; });

完成jsfiddle： http://jsfiddle.net/kPM5L/

Complete jsfiddle: http://jsfiddle.net/kPM5L/

将新数据添加到图表中的方法是什么？

What is a clean way to add the new data to the chart?

推荐答案

要使转换顺利进行，您需要将最初使用的代码添加到更新函数中。工作jsfiddle 这里。

To get the transition to work smoothly, you need to add the code that you're using initially to your update function as well. Working jsfiddle here.

和一些代码让这么快乐 - 这也是更新函数中需要的：

And some code to make SO happy -- this is what needs to be in the update function as well:

.enter()
.append("path")
.attr("stroke", "white")
.attr("stroke-width", 0.8)
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc)
.each(function(d) { return this.current = d; });

.enter()
.append("text")
.attr("class", "arcLabel")
.attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; })
.attr("text-anchor", "middle")
.style("fill-opacity", function(d) {
  if (d.value === 0) { return 1e-6; }
  else { return 1; }
})
.text(function(d) { return d.data.label; });

这篇关于向D3.js中的动画饼图添加新细分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！