數據數組中的特定元素

所以我的問題是雙重的。讓我說，我對d3和javascript很新，如果我的問題看起來很簡單，請原諒我。數據數組中的特定元素

首先，我創建我的數據數組，如下所示：

var data=[ 
{ 
    "atomic_number": "1", 
    "name": "H", 
    "en": "2.2", 
    "type": "non-metal" 
}, 
{ 
    "atomic_number": "3", 
    "name": "Li", 
    "en": "1", 
    "type": "metal" 
} 
    ]

我也創建了一個SVG的畫布：

< SVG ID = 「畫布」的xmlns = 「LINK」版本= 「1.1」>

所以我做的與D3如下：

  var selection=canvas.selectAll("circle") 
       .data(data_var) 

      selection.enter().append("circle") 

      selection 
       .transition().duration(800) 
        .attr("id", d.name)

我第一個問題是，是否合法/可以給我的數據數組中的每個元素一個id我這樣做attr（「id」，d.name「）的方式？如果不是，我會如何去給每個元素分配自己的ID？

我的第二個問題有兩個部分：

A-假設我正確應用的ID給每個元素，我該如何去訪問後說元素？我可以做var my_var = d3.select（「＃id」）嗎？因爲我試圖這樣做，它似乎沒有工作。我不知何故必須將它從我的數據數組中取出？

b - 假設我的數據數組中的所有元素都顯示爲屏幕上的圓圈。我如何做到這一點，如果我點擊其中的一個，將調用一個將在該特定元素/圓上操作的函數？

來源

2012-11-01 user1782677

第一個問題：你在做什麼幾乎沒問題，但你提出問題的方式似乎表明你需要澄清一些事情。

首先，您需要區分數據元素和元素的圖形表示。當你做一個選擇（並使用data（）調用將其綁定到數據）時，你實際上選擇了圖形表示綁定數據，在你的情況下是svg：circle元素。

這裏有點奇怪的是你選擇的過渡調用。這是錯誤的，這很奇怪。這很奇怪，因爲您正在更改非視覺屬性併爲此使用轉換，我不明白爲什麼要這樣做。其次，這是錯誤的，訪問數據，綁定到一個元素，你需要在這樣的函數時：

.attr("id", function(d) { return d.name;})

我重寫代碼如下：

var data = ...; 
var selection = canvas.selectAll("circle").data(data); 
selection.enter() 
    .append("circle") 
    ... // Don't forget the attributes that actually set the size/pos of the circle 
    .attr("id", function(d) { return d.name; })

第二個問題：

a）是的，你確實可以通過id訪問喜歡的元素，但由於我在前一節中指出的錯誤，它不適用於你。但是，在很多情況下，不需要訪問單個元素。我不確定你想要對個別元素做什麼，所以如果你能詳細說明。

b）您必須安裝事件處理程序：

selection.enter() 
    .append("circle") 
    .... 
    .on("click", function() { console.log("I was clicked"); });

來源

2012-11-01 14:10:24

感謝這麼多的幫助！我現在明白了很多。但是，有一件事是使用.on（「click」，function（）{}）;似乎並沒有爲我工作。我寫的時候，我的圈子都沒有畫出來。 – user1782677

數據數組中的特定元素

回答

相關問題