[英]d3 v4: Data join for bar chart
I am trying to adopt bar chart example here to understand data joins in d3 v4. 我试图在此处采用条形图示例以了解d3 v4中的数据联接。 Enter selection works fine but I am unable to figure out how to update. 输入选择效果很好,但我不知道如何更新。 Here is what I have so far: https://jsfiddle.net/hackygkL/ Can someone please help me. 到目前为止,这里是我所拥有的: https : //jsfiddle.net/hackygkL/有人可以帮我吗。
var width = 420,
barheight = 30;
var svg = d3.select('#bar-chart')
.append('svg')
.attr('width', width + 50)
.attr('height', 1000);
var scale = d3.scaleLinear()
.range([0, width]);
function createBar(data) {
scale.domain([0, d3.max(data)]);
var barGroups = svg.selectAll('g')
.data(data, function(d){return d;});
barGroups.exit().remove();
var enterGroup = barGroups.enter() //ENTER
.append('g')
.merge(barGroups) //UPDATE
.attr("transform", function(d, i){
return "translate(0, " + barheight * i + ")";
});
var bars = barGroups.selectAll('rect');
enterGroup.append('rect') //ENTER
.attr('class', 'bar')
.attr('height', barheight - 1)
.merge(bars) //UPDATE
.attr('width', function(d){
return scale(d);
})
.attr('fill', 'steelblue');
var texts = barGroups.selectAll('text');
enterGroup.append("text") //ENTER
.attr('class', 'text')
.attr("y", barheight / 2)
.attr("dy", ".35em")
.merge(texts) //UPDATE
.attr("x", function(d) { return scale(d) + 10; })
.text(function(d) { return d;});
}
在首先合并组之后,然后更新矩形和文本,似乎可以工作: https ://bl.ocks.org/ckothari/699b112b6e1376779e65973bbabdced6
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.