Как нарисовать простой ориентированный граф

я могу нарисовать простой направленный силовой график, как это:Как нарисовать простой ориентированный граф

<html> 
<head> 
    <meta charset='utf-8'> 
    <title>Force Layout Example 1</title> 
    <style> 

.node { 
    fill: #ccc; 
    stroke: #fff; 
    stroke-width: 2px; 
} 

.link { 
    stroke: #777; 
    stroke-width: 2px; 
} 

    </style> 
</head> 
<body> 
    <script src='http://d3js.org/d3.v3.min.js'></script> 
    <script> 

var width = 640, 
    height = 480; 
    constant = 174 

var nodes = [ 
    { x: constant, y: 215 , width:50,height:50 }, 
    { x: 2*constant, y: 215 ,width:50,height:50 }, 
    { x: 3*constant, y: 215 ,width:50,height:50 }, 
    { x: 4*constant, y: 215 ,width:50,height:50 } 
]; 


var links = [ 
    { source: 0, target: 1 } 
]; 

var svg = d3.select('body').append('svg') 
    .attr('width', width) 
    .attr('height', height); 


var force = d3.layout.force() 
    .size([width, height]) 
    .nodes(nodes) 
    .links(links); 


force.linkDistance(width/2); 


var link = svg.selectAll('.link') 
    .data(links) 
    .enter().append('line') 
    .attr('class', 'link'); 


var node = svg.selectAll('.node') 
    .data(nodes) 
    .enter().append('rect') 
    .attr('class', 'node'); 

force.on('end', function() { 

    node.attr('x', function(d) { return d.x; }) 
     .attr('y', function(d) { return 215; }) 
     .attr('width', function(d) { return d.width; }) 
     .attr('height', function(d) { return d.height; }); 

    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; }); 

}); 


force.start(); 

    </script> 
</body> 
</html>

, который дает мне выход, как:

enter image description here

Я хочу, чтобы достичь этого:

enter image description here

Я не уверен, что ho w Я могу изменить приведенный выше код, чтобы добавить текст внутри прямоугольника. Я также хочу, чтобы прямоугольник был закруглен!

Я попытался следующие для текста части:

node.append('text').text('A') 
    .attr('x', 174) 
    .attr('y', 250) 
    .attr('fill', 'black')

Однако, это не работает. Я не уверен, как это достичь. Любая подсказка?

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

источник

2015-06-29 batman

Вместо '.enter(). Append ('rect')', начинаем с '.enter(). Append ('g')', тогда вы можете добавить элементы 'rect' и' text' в ' G'. Затем вы используете 'attr (" transform "," translate ("+ ... +") ")' в обратном вызове tick tick для размещения всего в узлах 'g'. –

Фактический код для вставки текста в этом стиле будет выглядеть следующим образом:

node.append("text").style("text-anchor", "middle") 
    .style("pointer-events", "none") 
    .style("font-weight", 900) 
    .attr("fill", "white") 
    .style("stroke-width", "0.3px") 
    .style("font-size", "16px") 
    .attr("y", function (d){return d.height/2+6;}) 
    .attr("x", function (d){return d.width/2;}) 
    .text(function (d) {return d.label;});

Вот Fiddle, который очень похож на ваш образ. Некоторые заметные изменения:

Узлы имеют дополнительное поле «метки» (A, B, C, D). Также можно использовать целочисленный символ, чтобы автоматически назначать его с помощью индекса узла.
Добавлены все необходимые ссылки
переменная «узел» теперь содержит g элементы (группы), которые затем добавленный rect И text. Эти элементы затем переводятся в соответствии с полями node.x и node.y, которые одновременно перемещают текст и прямоугольник.
Стилизованные прямоугольники. Округлены с использованием rx и ry и окрашены с использованием .style("fill", "#2376B2").

Надеюсь, это поможет!

источник

2015-06-29 15:42:38 JSBob

Как я могу сделать стрелку с головой? – batman

Вы должны добавить объект-маркер в раздел 'defs', а затем добавить его в атрибут' marker-конец' или 'marker-mid' ссылок. Простой путь к стрелке: 'M 0 0 12 9 0 18 3 9'. Чтобы упростить задачу, измените «строки» на «пути», а затем прикрепите к «marker-mid». Это также требует небольшого изменения инициализации линии. [Фидл] (http://jsfiddle.net/gj2y87z8/6/). Если вы хотите, чтобы маркер на голове стрелки, вы можете сохранить их в виде строк, но для кодирования нужно учитывать ширину/высоту прямоугольника (так как он в настоящее время привязывается к середине, заставляя стрелки быть скрытыми). – JSBob

Как нарисовать простой ориентированный граф

ответ

Смежные вопросы