数据数组中的特定元素

Question

所以我的问题是双重的。让我说，我对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 - 假设我的数据数组中的所有元素都显示为屏幕上的圆圈。我如何做到这一点，如果我点击其中的一个，将调用一个将在该特定元素/圆上操作的函数？

Answer 1

第一个问题：你在做什么几乎没问题，但你提出问题的方式似乎表明你需要澄清一些事情。

首先，您需要区分数据元素和元素的图形表示。当你做一个选择（并使用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"); });