最近與基於可視化d3.js我要創建大量軸的開發啓動後創建一個使用數據D3

Question

結合軸。

我試圖使用通過結合數據（包含各軸的結構域）和附加元素添加到輸入選擇創建其他SVG元素（圓圈，線）當我會使用相同的方法。

axesSVG.selectAll("g") 
     .data(dimensionExtents) 
     .enter() 
     .append("g") 
     .attr("class","axis") 
     .call(function(d){return d3.svg.axis() 
       .scale(d.scale).range(0,500)) 
       .orient("left") 
       .ticks(20);}) 
     .attr("transform", "translate(function(d,i){....},0)"); 

但是，這種方法不起作用。在執行它之後，svg元素只包含與應該有軸一樣多的空g元素。我懷疑是使用的用戶指定的數據，例如在ATTR做的呼叫不允許。

有人可以證實這一點嗎？

使用基於循環的解決方案之前，我想，以確保沒有在我的代碼一些愚蠢的錯誤或基本概念missunderstanding。

Answer 1

selection.call的工作方式不同，大部分的其他選擇功能。它將當前選擇中的單個時間作爲參數調用提供的函數。

因此，在您的示例中，函數中的d參數實際上是包含您新添加的g元素的輸入選擇。

selection.each可能是更你在找什麼：

axesSVG.selectAll("g") 
    .data(dimensionExtents) 
    .enter() 
    .append("g") 
    .attr("class","axis") 
    .each(function(d) { 
     var axis = d3.svg.axis() 
      .scale(d.scale).range(0,500)) 
      .orient("left") 
      .ticks(20); 

     axis(d3.select(this)); 
    }); 

每個被每個節點調用一次評選中，被傳遞的每個節點上的數據爲d，具有當前節點作爲this參考。