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()函數中，就像我在此處更新的小提琴中所做的那樣。