2

我有一个 d3 饼图，当我通过选择更新路径值时，我无法弄清楚如何更新附加到各个路径的一些 SVG 标题。

我的代码的精简版本如下。

我一直在尝试不同的代码片段，尤其是在函数 change() 中，但还没有找到它的诀窍。我也没有找到任何已经发布的好例子。

同样，我使用路径标题标签作为工具提示，并在更新路径值时尝试更新它们的文本值。

非常感谢任何帮助，因为我在本周末完成这个项目的最后期限。

再次非常感谢。

var dataset = {
Y2012:  [1000, 2000, 3000],
Y2011:  [3000, 2000, 1000],
//etc.
};

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

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(outer_radius - 85)
    .outerRadius(outer_radius - 50);

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

var path = svg.selectAll("path")
    .data(pie(dataset.Y2012))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", outer_arc)
    .each(function(d) { this._current = d; });

var tooltips= d3.selectAll("path")
  .append("title")
    .classed("tooltip", true)
    .text(function(d) { return d.value });

d3.selectAll("#select_year").on("change", change);

function change() {
  path = path.data(pie(dataset[this.value])); // update the data
  path.transition().duration(750).attrTween("d", arcPathTween);
}

function arcPathTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}
4

1 回答 1

3

问题是您没有更新function change(). 即使您的标题文本是由访问数据的函数创建的，您也必须意识到，当您更新数据时，该函数不会自动再次执行。这必须手动完成：

function change(newYear) {
    path = path.data(pie(dataset[newYear])); // update the data
    path.transition().duration(750).attrTween("d", arcPathTween);
    path.select("title").text(function(d) { return d.value });
}

我还创建了一个小提琴来说明解决方案。

如果你想避免代码重复（你应该这样做），你可以使用一般更新模式，这意味着你在同一个函数中进行初始化和更新。

于 2013-04-25T06:00:56.480 回答