как отобразить атрибуты узла, такие как имя человека, фотография и адрес, в графе, ориентированном на силу

Я сделаю все возможное, чтобы ответить, но в вашем вопросе есть что рассказать, так что это скорее обзор того, где искать дополнительную информацию, и немного, чтобы вы начали в правильном направлении.

Пожалуйста, извините за некачественные ссылки (пока не могу выложить больше двух...)

Узлы могут иметь фиксированное положение, установив для логического свойства «fixed» каждого отдельного узла значение true.

См. разделы: # force.nodes([nodes]) https://github.com/mbostock/d3/wiki/Force-Layout

Чтобы сделать узлы интерактивными, вы можете прикрепить прослушиватель событий к выбору узла, когда вы добавляете новые узлы к выбору узла. См. здесь: Github/mbostock/d3/wiki/Selections#wiki-on

Чтобы добавить больше свойств к каждому узлу, просто добавьте эти данные к своим объектам внутри массива «узлов», прежде чем присоединять их к вашему выбору.

Вот редактирование, которое я сделал, чтобы показать, как вы можете добавить поведение перетаскивания и событие прослушивателя щелчка мыши для переключения узлов между fixed = true и false, с некоторыми комментариями о том, где вы могли бы добавить дополнительные свойства узла, и возможно, вызовы функций для отображения дополнительной информации об узле. https://gist.github.com/alexhornbake/6079321

Вышеприведенное было отредактировано из следующего примера. Я все еще возвращаюсь к этому примеру, когда запутываюсь, очень полезный/простой пример Force Layout: Gist GitHub /mbostock/1095795

Чтобы добавить к ответу Алекса, вот простой пример, предполагающий, что вы связали свойство name с каждым значением данных. Таким образом, вы захотите иметь элемент g для каждого узла, а каждый g будет иметь как circle, так и text. Затем вы можете связать их через индексы или значения, как объясняет Майк Босток здесь< /а>. Обратите внимание, что данные автоматически наследуются от родителя. Используйте связанное событие по клику, чтобы добавить или удалить класс к тексту, который будет отображать или скрывать его. Это можно сделать с помощью selection.classed()

var nodes = d3.select("body").append("svg:g")
                     .selectAll("g.nodeGroup")
                     .data(dataset)
                     .enter()
                     .attr("class", "nodeGroup")
                     .attr("x", function(d) { ...
                          ...
                     .each(function(d) { 
                            d3.select(this).append("circle")
                                    .attr("r", function(p) { return p.value})
                                    .on("click", function(p) {
                                         d3.selectAll("g.nodeGroup text")
                                            .filter(q) { return p.value == q.value}
                                            .classed("show", true)});
                            d3.select(this).append("text")
                                     .attr("text", function (P) { return p.name})
                   });