数据数组中的特定元素

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 画布：

所以我对 d3 执行以下操作：

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

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

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

我的第一个问题是，通过 attr("id", d.name") 给我的数据数组中的每个元素一个 id 是否合法/可以？如果不是，我将如何去关于给每个元素自己的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"); });