Я разработал круговую диаграмму D3. Он имеет интерактивную легенду, нажав на легенду, чтобы удалить или повторно войти в соответствующий сегмент круговой диаграммы. Моя проблема в том, что я не могу понять, как обновить метки при использовании легенды.
Я нашел этот ответ особенно полезен, но я все еще не могу заставить себя работать.
У круговых диаграмм NVd3 есть эта функция, но я ищу чисто решение для d3.
Мой код находится в этой скрипте:
Я включил часть, в которой, по моему мнению, проблема находится ниже:
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) + "%"; });
});
Буду признателен за любую помощь