Добавление метки к ссылкам в D3 force directed graph

Эта ссылка содержит решение, которое вам нужно.

Ключевым моментом здесь является то, что" заголовок " добавляет всплывающую подсказку. Для label вы должны предоставить немного более сложный (но не слишком сложный) код, как это показано в примере из ссылки выше:

// Append text to Link edges
var linkText = svgCanvas.selectAll(".gLink")
    .data(force.links())
    .append("text")
    .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("x", function(d) {
        if (d.target.x > d.source.x) {
            return (d.source.x + (d.target.x - d.source.x)/2); }
        else {
            return (d.target.x + (d.source.x - d.target.x)/2); }
    })
    .attr("y", function(d) {
        if (d.target.y > d.source.y) {
            return (d.source.y + (d.target.y - d.source.y)/2); }
        else {
            return (d.target.y + (d.source.y - d.target.y)/2); }
    })
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("dy", ".35em")
    .text(function(d) { return d.linkName; });

Идея кода проста: он вычисляет среднюю точку ссылки и отображает некоторый текст в этом месте (вы можете решить, что это за текст на самом деле). Есть некоторые дополнительные расчеты и условия, вы можете понять это из кода, однако вы все равно захотите изменить их в зависимости от ваших потребностей и эстетики.

EDIT: важно отметить, что "gLink" - это имя класса ссылок, ранее определенного с помощью этого кода:

// Draw lines for Links between Nodes
var link = svgCanvas.selectAll(".gLink")
    .data(force.links())

В вашем примере это может быть по-другому, вам нужно настроить код.

---

---

Вот руководство, Как включить решение из примера выше в другой пример компоновки силы, который не имеет связи метки:

Организация объектов SVG и привязка данных

В D3 force-directed layouts, layout должен быть снабжен массивом узлов и связей, а также force.необходимо вызвать функцию start (). После этого визуальные элементы могут быть созданы в виде требований и описаний. В нашем случае следующий код инициализирует элемент SVG " g " для каждой ссылки. Этот элемент " g " должен содержать строку, которая визуально представляет ссылку, а также текст, соответствующий этой ссылке.

force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
   .enter()
    .append("g")
    .attr("class", "link")
    .append("line")
    .attr("class", "link-line")
    .style("stroke-width", function (d) {
        return Math.sqrt(d.value);
    });

var linkText = svg.selectAll(".link")
    .append("text")
    .attr("class", "link-label")
   .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        return d.value;
    });

Элементы" g" есть ссылка класс "линии" есть ссылка он-лайн класс "", ярлык есть ссылка-метка класса"". Это делается для того, чтобы элементы" g "можно было легко выбрать, а линии и метки можно было стилизовать в файле CSS условно через классы" link-line "и" link-label " (хотя такой стиль в данном примере не используется).

Инициализация позиций строк и текста здесь не производится, так как они в любом случае будут обновлены duting animation.

Силовая анимация

Для того, чтобы анимация была видимая функция "галочка" должна содержать код, определяющий положение строк и текста:

    link.attr("x1", function (d) { return d.source.x; })
        .attr("y1", function (d) { return d.source.y; })
        .attr("x2", function (d) { return d.target.x; })
        .attr("y2", function (d) { return d.target.y; });

    linkText
        .attr("x", function(d) {
            return ((d.source.x + d.target.x)/2);
        })
        .attr("y", function(d) {
            return ((d.source.y + d.target.y)/2);
        });

Вот полученный пример: плунжер