javascript - 单击时，在 d3.js 中将其他数据显示在单独的 div 中；按值(value)传递

Question

我正在研究 d3 中的无向图。当我点击一个节点时，我想在 svg 之外的一个单独的 div(类:信息)中显示它的数据。但是，我不知道如何将数据从节点放置到 div。

var node = svg.selectAll(".node")
              .data(graph.nodes)
              .enter().append("circle")
              .attr("class", "node")
              .attr("r", 5)
              .style("fill", function(d) { return color(d.group); })
              .call(force.drag)
              .on("click", function(d){
                    d3.selectAll(".node").attr('r', 5)
                                         .style("fill", function(d) { return color(d.group); })
                                         .style("stroke","none");       
                    d3.select(this).attr('r', 25)
                                   .style("fill","lightcoral")
                                   .style("stroke","red");

                    d3.select("#info").text(/* TEXT */);
                });

我试过:

1. 我试过 d3.select("#info").text(function(d){return d.text;});。但是，如果我没有理解错的话，d 会引用当前选择的数据。因此，有了这个，d3.select("#info") 中就没有数据了，因为当前选择的是 div #info。
2. 我还尝试将 function(d){return d.text;} 绑定(bind)到一个变量，并将该变量传递给 text()。但是，Javascript 不按值传递；这与 #1 相同。

我读过有关为文本创建对象的信息。我想我在这里忽略了一些东西。有没有一种优雅的方法可以将数据从节点显示到 svg 外部的 div？

Answer 1

拉斯是对的:d3.select("#info").text(d.text);

你在做什么，d3.select("#info").text(function(d){return d.text;});，将一个函数传递给 .text()是在您刚刚选择的 #info 元素的上下文中评估该函数。但是您已经处于要从中获取文本的节点的上下文中，并且您正在访问的 d (在 Lars 的回答中)是正在传递的 d到您的点击回调。所以，只要那个 d 有你想要的 .text 属性，你就应该做生意。