2

我无法将段添加到 D3.js 饼图中。我知道我需要使用.enter()和.append()暂存新数据——但是当我将弧分组（标签需要）时，我不确定如何应用它。

这是我的更新功能：

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/

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

4

1 回答 1

4

为了使过渡顺利进行，您还需要将最初使用的代码添加到更新函数中。在这里工作 jsfiddle 。

还有一些让你很开心的代码——这也是更新函数中需要的：

.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; });
于 2013-04-06T10:35:35.297 回答