如何画一个简单的有向图

Question

I can draw a simple directed force graph like this:我可以像这样绘制一个简单的有向力图：

<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>

which gives me output like:这给了我 output 之类的：

在此处输入图像描述

I want to achieve this:我想实现这一点：

在此处输入图像描述

I'm not sure how I can change the above code to add the text inside the rectangle.我不确定如何更改上述代码以在矩形内添加文本。 I also want the rectangle to be rounded!我也希望矩形是圆形的！

I tried the following for the text piece:我为文本尝试了以下内容：

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

However, that doesn't work.但是，这是行不通的。 I'm not sure how to achieve that.我不确定如何实现这一目标。 Any clue?有什么线索吗？

Thanks in advance.提前致谢。

Answer 1

The actual code for inserting text in that style would be as follows:以该样式插入文本的实际代码如下：

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

Here is a Fiddle that is very similar to your image.这是一个与您的图像非常相似的小提琴。 Some notable changes:一些显着的变化：

Nodes have an additional field of 'label' (A,B,C,D).节点有一个额外的“标签”字段（A、B、C、D）。 Could also use an integer->char to automatically assign this using the index of the node.也可以使用 integer->char 使用节点的索引自动分配它。
Added all the necessary links添加了所有必要的链接
'Node' variable now contains g (group) elements which then have the rect AND text added. 'Node' 变量现在包含g （组）元素，然后添加了rect AND text 。 These elements are then translated according to the node.x and node.y fields, which moves both text and rect at once.然后根据node.x和node.y字段转换这些元素，这会同时移动 text 和 rect。
Stylized rectangles.程式化的矩形。 Rounded using rx and ry , and coloured using .style("fill", "#2376B2") .使用rx和ry四舍五入，并使用.style("fill", "#2376B2") 。

Hope this helps!希望这可以帮助！

Answer 2

I've made a free and lightweight library that may be useful to others:我制作了一个免费的轻量级库，可能对其他人有用：

Arg-Graph is a simple free library for creating directed SVG graphs or diagram using JQuery. Arg-Graph 是一个简单的免费库，用于使用 JQuery 创建有向 SVG 图或图表。

如何画一个简单的有向图

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-06-29 15:42:38

解决方案2
0 2018-04-09 08:36:05

如何画一个简单的有向图

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-06-29 15:42:38

解决方案2 0 2018-04-09 08:36:05

解决方案1
1 已采纳 2015-06-29 15:42:38

解决方案2
0 2018-04-09 08:36:05