Нажимайте, покажите другие данные в отдельном div в d3.js; Передача по значению

Question

Я работаю над неориентированным графом в d3. Когда я нажимаю узел, я хочу отображать его данные в отдельном div (class: info) вне svg. Однако я не могу понять, как поместить данные из узла в 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;} к переменной и передать эту переменную в text(). Однако Javascript не проходит по значению; это тот же сценарий, что и # 1.

Я читал о создании объекта только для текста. Кажется, я кое-что упустил. Есть ли элегантный способ показать данные с узла на div вне svg?

Answer 1

Ларс прав: d3.select("#info").text(d.text);

Что вы делали, d3.select("#info").text(function(d){return d.text;});, переходя функцию .text(), чтобы иметь эту функцию оцененную в контексте #info элемента, который вы только что выбрали. Но вы уже находитесь в контексте узла, из которого хотите получить текст, и d, к которому вы обращаетесь (в ответе Ларса), передается d на ваш обратный вызов. Итак, до тех пор, пока у d есть свойство .text, которое вы хотите, вы должны быть в бизнесе.