[英]How to update a bar chart with accompanying text in d3?
我正在创建条形图,作为d3中更大的数据可视化的一部分。 我希望能够在可视化的一部分中更改数据,并且所有图表都将更新。 图表的简化版本如下。
var dataset = [1, 3, 5, 3, 3];
...
var svg = d3.select("body #container").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
...
我使用此svg元素创建其他图表,例如地图,圆形等。 条形图是这样实现的。
function bars(dataset) {
var barChart = g.selectAll("rect.bar")
.data(dataset)
.enter();
barChart.append("rect")
.attr("class", "bar")
.attr("x", function(d, i) { return i * 30 + 100; })
.attr("y", function(d) { return (height - 130) - d * 4;})
.attr("width", 25)
.attr("height", function(d) { return d * 4; });
barChart.append("text")
.text(function(d) { return d; })
.attr("x", function(d, i) { return i * 30 + 103; })
.attr("y", function(d) { return (height - 130) - d/10 - 5;})
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "darkgray");
}
现在,这使条形图很好,但是有一个功能
...
.on("click", function() {
...
var newdata = [5, 2, 6, 2, 4]; // new values
g.selectAll("rect.bar").remove(); // This removes the bars
g.selectAll("text").remove(); // Problem here: All texts are removed
bars(newdata);
}
我尝试使用.remove()函数将条形图转换为新值。 这适用于条形矩形,因为没有其他条形图,但是当我尝试删除上面显示的值标签时,所有其他文本元素也被删除了。 有没有一种方法只能更新与条形相关的文本?
您是否尝试过将类应用于文本并仅选择要删除的类? 例如
barChart.append("text")
.attr('class','label')
.text(function(d) { return d; })
然后
g.selectAll(".label").remove();
顺便说一句,如果在更新之间并非所有元素都被删除,那么您不是考虑删除所有元素,而是考虑使用enter()
和exit()
将新数据绑定到现有元素,而仅删除那些变化?
编辑像这样:
function bars(dataset) {
var bar = g.selectAll(".bar").data(dataset);
bar.exit().remove();
bar.enter().append("rect").attr("class", "bar");
bar
.attr("x", function(d, i) { return i * 30 + 100; })
.attr("y", function(d) { return (height - 130) - d * 4;})
.attr("width", 25)
.attr("height", function(d) { return d * 4; });
var label = g.selectAll(".label").data(dataset);
label.exit().remove();
label.enter().append("text").attr("class", "label");
label
.text(function(d) { return d; })
.attr("x", function(d, i) { return i * 30 + 103; })
.attr("y", function(d) { return (height - 130) - d/10 - 5;})
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "darkgray");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.