Как отобразить метку для двунаправленной ссылки/пути/строки в D3js принудительно ориентированном макете

Я пытаюсь нарисовать топологию сети, используя принудительную компоновку D3sj. Я сделал базовую топологию со ссылкой и узлом. Однако теперь я хочу показать имя интерфейса для каждой ссылки на каждом узле, как показано на следующем рисунке. Не могли бы вы, ребята, направить меня, как я могу это сделать?

Заранее спасибо!

P/S Я приложил сюда свою топологию!1


d3.js topology force-layout
person user3467117    schedule 27.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В идеале вы должны представить уже написанный вами javascript и объяснить, что он делает и чего не хватает. Сказав это, я недавно закончил работу над проектом, аналогичным тому, что вы описываете, поэтому мне пригодились следующие результаты.

Делает ли этот jsfiddle то, что вы пытаетесь сделать?

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

var text = svg.selectAll('text')
    .data(force.nodes())
    .enter().append('text')
        .text(function (d) { return d.name });

Здесь я предполагаю, что массив nodes[] содержит объекты со свойством .name, которое нужно отобразить.

Второй компонент — перевести текстовые элементы в соответствующие позиции внутри обработчика tick:

function tick () {
    text.attr('transform', function (d) {
        return 'translate(' + d.x + ',' + d.y + ')';
    });
    // Other code for nodes and links
}

Полный рабочий пример см. в jsfiddle, включая код с комментариями, который позволит вам добавлять изображения в узлы. если вы хотите попытаться воспроизвести образец изображения более точно.

person Michael    schedule 27.03.2014