单击后，在d3.js中的单独div中显示其他数据;通过值传递

Question

我正在d3中处理一个无向图。当我单击一个节点时，我想在svg外部的一个单独的div（class:info）中显示它的数据。然而，我不知道如何将数据从节点放置到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将引用当前选择的数据。因此，由于当前选择是div #info，因此d3.select("#info")内部没有数据
2. 我还尝试将function(d){return d.text;}绑定到一个变量，并将该变量传递给text()。但是，Javascript不传递值；这是与#1相同的场景

我读过关于只为文本创建对象的文章。我想我忽略了一些东西。有没有一种优雅的方式可以将数据从节点显示到svg之外的div？

Answer 1

Lars是对的：d3.select("#info").text(d.text);

d3.select("#info").text(function(d){return d.text;});，通过将函数传递给.text（），您所做的是在刚刚选择的#info元素的上下文中对该函数进行求值。但是您已经处于要从中获取文本的节点的上下文中，并且您正在访问的d（在Lars的回答中）就是传递给您的点击回调的d。所以，只要d具有您想要的.text属性，您就应该是在做生意。