在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 元素附加到输入选择，但仍允许您使用新数据更新所有元素。

注意：
当您追加或插入时，输入选择合并到更新选择。无需将相同的运算符分别应用于输入和更新选择，您现在只需在输入节点后将它们应用于更新选择一次。
见：https://github.com/mbostock/d3/wiki/Selections#data