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; });
}

当我第一次调用update时，条形图正确创建，在subsequenet更新调用时，它会在标记下创建rect和text元素而不是更新

我的数据是dict {'name': a, 'value': 12, .....}每次更新的元素数量可能不同。每次更新中可能有相同的键（名称）具有不同的值

Answer 1

bars = chart.selectAll('g')

您正在选择g元素的全部（新的和现有的）。

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

因此，当您在append上致电bars时，您会将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

在d3中更新条形图，生成多个图表

1 个答案: