我开发了一个D3饼图。它有一个交互式图例,点击图例会删除或重新输入相应的饼图段。我的问题是,在使用图例时,我无法弄清楚如何更新标签。
我发现this answer特别有帮助,但我仍然无法自己工作。
NVd3饼图具有此功能,但我正在寻找纯粹的d3解决方案。
我的代码位于this fiddle:
我已经包含了我认为问题所在的部分:
legend.on('click.updatelabels', function(Task) {
var rect = d3.select(this);
var enabled = true;
var totalEnabled = d3.sum(chartData.map(function(d) {
return (d.enabled) ? 1 : 0;
}));
if (rect.attr('class') === 'disabled') {
rect.attr('class', '');
} else {
if (totalEnabled < 2) return;
rect.attr('class', 'disabled');
enabled = false;
}
layoutLabels.value(function (d) { return (d.enabled) ? 1 : 0; });
d3.select('Text').selectAll("pieLegend").remove()
pieLabels.select("text")
.attr("transform", function (d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
// pythagorean theorem for hypotenuse
h = Math.sqrt(x * x + y * y);
return "translate(" + (x / h * labelRadius) + ',' +
(y / h * labelRadius) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function (d, i) { return ((d.Volume / sum) * 100).toFixed(0) + "%"; });
});
我将不胜感激任何帮助