D3有向圖節點爲矩形

我對D3非常陌生，我試圖繪製一個有向圖，但我希望節點是一個矩形而不是圓形。這裏是我已經試過代碼：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')

事情按預期工作。我犯了什麼錯誤？

而且我怎樣才能讓箭頭像指示一樣？

在此先感謝。

來源

2015-06-29 batman

你做這件事的，正確的，你應該這樣做：

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性能。

來源

2015-06-29 12:24:42

你必須定義矩形的屬性，不圓屬性使用node.attr，那麼它會運行正常

的箭頭使用SVG標記，看到這個例子：http://bl.ocks.org/d3noob/5141278

來源

2015-06-29 12:20:50

如何創建箭頭線？ – batman

@batman更新了答案 - 箭頭 –

你需要改變的圈子屬性對於矩形屬性如下：

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

希望這會有所幫助。

來源

2015-06-29 12:24:28

D3有向圖節點爲矩形

回答

相關問題