多個nvd3圖形和選擇問題

Question

我在同一頁面中有多個nvd3餅圖。現在，當我嘗試定位它們時，單獨使用以下代碼

d3.select(".nv-pieWrap") 
    .attr("transform", "translate(0,-35)"); 

只有頁面中的第一個圖形重新定位。據說在nvd3支持文檔中，select關鍵字如果用在多個函數中，只會選擇頁面中的第一個元素。

現在，當我將「select」替換爲「selectAll」時，每個圖都被重新定位。

我想分開定位它們，即「翻譯」座標在不同情況下會有所不同。我將如何實現這一目標？誰能幫忙？ （「.nv-pieWrap」） .attr（「transform」，「translate（0，-35）」）;

Answer 1

我有兩個問題的解決方案。

1. 一個解決方案是你可以指定'transform'屬性不是作爲常量「translate（0，-35）」而是一個函數。而在函數內確定您需要哪種座標基於圖表的指標：

   d3.selectAll(".nv-pieWrap") 
       .attr("transform", function(d, i) { 
        // i is a chart index 
        if (i === 0) { 
        return 'translate(0,-35)'; 
        } else { 
        return 'translate(100,-35)'; 
        } 
       }); 
   

2. 另一種解決方案是包裝你的代碼

   d3.select(".nv-pieWrap") 
       .attr("transform", "translate(0,-35)"); 
   

   成轉換函數，它接受一個節點，改造作爲參數，例如

   var transform = function(chart, transform) { 
       return 
       d3.select(chart) 
        .attr("transform", transform); 
   } 
   draw("#pieChart1", "translate(0,-35)"); 
   draw("#pieChart2", "translate(100,-35)");