Question

我可以绘制一个简单的定向力图：

<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

我不确定如何更改上面的代码以在矩形内添加文字。我也希望矩形变圆！

我尝试了以下文字：

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

但是，这不起作用。我不知道如何实现这一目标。任何线索？

提前致谢。

Answer 1

以该样式插入文本的实际代码如下：

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，与您的图片非常相似。一些值得注意的变化：

节点还有一个附加字段＆＃39;标签＆＃39; （A B C D）。也可以使用integer-＆gt; char来自动使用节点的索引来分配它。
添加了所有必要的链接
＆＃39;节点＆＃39;变量现在包含g（组）元素，然后添加rect和text。然后根据node.x和node.y字段翻译这些元素，这会立即同时移动text和rect。
程式化的矩形。使用rx和ry进行圆化，并使用.style("fill", "#2376B2")着色。

希望这有帮助！

Answer 2

我制作了一个免费且轻量级的库，可能对其他人有用：

Arg-Graph is a simple free library for creating directed SVG graphs or diagram using JQuery.

如何绘制简单的有向图

2 个答案: