Question

我是D3的新手，我正在尝试绘制有向图，但我希望节点是一个矩形而不是圆形。这是我尝试过的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Testing</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;

var nodes = [
    { x:   width/3, y: height/2 , width:50,height:50 },
    { x: 2*width/3, y: height/2 ,width:50,height:50 },
    { x: 3*width/4, y: height/2 ,width:50,height:50 },
    { x: 6*width/5, y: height/2 ,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('r', width/25)
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; });

    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().append('rect')

到

.enter().append('circle')

事情按预期工作。我在哪里弄错了？

而且我怎样才能使箭头成为指示箭头？

提前致谢。

Answer 1

您必须使用node.attr定义矩形属性而不是圆属性，然后才能正确运行

箭头

使用svg标记，请参阅此示例：http://bl.ocks.org/d3noob/5141278

Answer 2

你正确地做到了，你应该这样做：

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

而不是circle属性。

Answer 3

您需要更改矩形属性的圆属性，如下所示：

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

希望这有帮助。

D3将图形节点定向为矩形

3 个答案: