javascript - 更新 d3 中的条形图生成多个图表

Question

我正在遵循 D3 上给定的教程 bar chart -2

我在两个函数中设置了代码，一个是 init，一个是 update

var xScale = null;
var chart = null;
function init(w, c) {
    xScale = d3.scale.linear()
        .range([0, w]);
    chart = d3.select(c)
        .append('svg')
            .attr('width', w);

function update(data) {
        xScale.domain([0, d3.max(data, function(d) { return +d.value; })]);                
        chart.attr('height', 20 * data.length);           
        var bars = chart.selectAll('g')         
            .data(data);
        bars.exit().remove();
        bars.enter().append('g')
            .attr('transform', function(d, i) { return 'translate(0,' + i * 20 + ')'; });
        bars.append('rect')
            .attr('width', function(d) { return xScale(+d.value); })
            .attr('height', 18);

        bars.append('text')
            .attr('x', function(d) { return xScale(+d.value); })
            .attr('y', 10)
            .attr('dy', '.45em')
            .text(function (d) { return d.name; });
}

当我第一次调用更新时，条形图已正确创建，在后续更新调用中，它会在标签下创建矩形和文本元素而不是更新

我的数据是一个字典 {'name': a, 'value': 12, .....} 每次更新的元素数量可以不同。每次更新中可能有相同的键(名称)具有不同的值

Answer 1

bars = chart.selectAll('g')

您正在选择所有 g 元素(新元素和现有元素)。

bars.append('rect');
bars.append('text');

因此，当您在 bars 上调用 append 时，您会将 rect 和 text 元素附加到新的和现有的 g 元素。

/* Enter */
enter = bars.enter().append('g');
enter.append('rect');
enter.append('text');

/* Update */
bars.attr('transform', function(d, i) { 
  return 'translate(0,' + i * 20 + ')';
});
bars.select('rect')
  .attr('width', function(d) { return xScale(+d.value); })
  .attr('height', 18);
bars.select('text')
  .attr('x', function(d) { return xScale(+d.value); })
  .attr('y', 10)
  .attr('dy', '.45em')
  .text(function (d) { return d.name; });

这允许您仅将 rect 和 text 元素附加到输入选择，但仍然允许您使用新数据更新所有元素。

Note:
The enter selection merges into the update selection when you append or insert. Rather than applying the same operators to the enter and update selections separately, you can now apply them only once to the update selection after entering the nodes.
See: https://github.com/mbostock/d3/wiki/Selections#data