d3-enter-追加太多元素，好像没有绑定数据

Question

我问这不是让代码正常工作，而是要确保我正确理解d3。 我创建了一个d3条形图示例，用于更好地理解d3的数据绑定和更新模式。 小提琴在这里： http : //jsfiddle.net/qP9j9/22/

小提琴最好地解释了这个问题，但我还将尝试在下面进行解释：

我将数据绑定和视图拆分为两个单独的函数：

var updateData = function() {

  data = generateRandomData();
  chart = d3.select('.chart').selectAll('div').data(data);
  y = d3.scale.linear().domain([0, Math.floor(d3.max(data))]).range([1,300]);

  updateChart();

};

var updateChart = function() {

  var margin = 1;
  var barWidth = (parseInt(d3.select('.chart').style('width'))/15) - margin;

  chart.transition()
        .style('height', function(d) { return y(d) + 'px' })
        .style('width', function() { return barWidth + 'px' })
        .style('left', function(d, i) { return (i * (barWidth+margin)) + 'px' });

  chart.enter().append('div')
        .style('height', function() { return 0; })
        .style('width', function() { return barWidth + 'px' })
        .style('left', function(d, i) { return (i * (barWidth+margin)) + 'px' })
        .transition()
        .style('height', function(d) { return y(d) + 'px' });

  chart.exit().remove();

};

调整大小时，我正在运行updateChart函数。 我的想法是，当数据不变时，我宁愿不绑定数据，而只是更新视图。 当数据实际更改时，我运行updateData函数。

奇怪的是，updateData函数需要运行两次才能正常运行。 如果updateData仅被调用一次（第一次加载页面时），那么在运行updateChart时，enter（）函数会再次将数据追加一遍。 因此，当页面调整大小时，您只会得到重复的dom元素。

我已对此进行了尽可能多的研究，包括研究了所提出的“类似问题”，我当然可以很容易地“解决”该问题。 但这似乎是我不了解的基本知识。

Answer 1

D3的主要思想是链接数据和文档，因此像您一样将两者分开是一个坏主意。 特别是，您使用的是.enter()和.exit()选择，如果您之前没有显式绑定数据，这些选择将无法正常工作。 在您的情况下， .enter()选择包含先前的选择，这就是为什么将所有内容添加两次的原因。

我的建议是两个具有一个要更新的功能，而不是两个单独的功能。 如果您确实要分离它们，则需要将.enter()和.exit()选择的处理放入updateData()函数中，就像我在此处更新的小提琴中所做的那样。