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

＆LT; svg id =＆＃34; canvas＆＃34; xmlns =＆＃34; LINK＆＃34; version =＆＃34; 1.1＆＃34; ＆GT;

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

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

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

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

我的第一个问题是，通过执行attr（＆＃34; id＆＃34;，d.name＆＃34;）来为我的数据数组中的每个元素提供id是合法/可行的吗？如果不是，我将如何给每个元素赋予自己的ID？

我的第二个问题有两个部分：

a-假设我正确地为每个元素应用了一个id，我该如何在以后访问所述元素？我可以做var my_var = d3.select（＆＃34;＃id＆＃34;）？因为我尝试过这样做而且似乎没有用。我不知何故必须从我的数据阵列中捕获它吗？

b-假设我的数据数组中的所有元素都显示为屏幕上的圆圈。我如何制作它，以便如果我点击其中一个，将调用一个将在该特定元素/圆上运行的函数？

Answer 1

第一个问题：你所做的事情几乎没问题，但你提出这个问题的方式似乎表明你需要对所发生的事情做一些澄清。

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

来自数据数组的特定元素

1 个答案: