如何在D3強制佈局中將圓形更改爲矩形節點

任何人都可以讓我知道如何在D3強制有向圖中將圓形節點更改爲矩形節點？請參閱下面的強制定向圖的代碼，請在這裏找到html腳本。如何在D3強制佈局中將圓形更改爲矩形節點

2013-07-25 Anthati Nagaraju

缺少鏈接。請附上。 – RickyA

對不起，請參閱鏈接http://bl.ocks.org/mbostock/4062045我很擔心如何將圓形轉換爲矩形 –

這裏是一個工作版本：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.node { 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

.link { 
    stroke: #999; 
    stroke-opacity: .6; 
} 

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

var width = 960, 
    height = 500; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(30) 
    .size([width, height]); 

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

d3.json("miserables.json", function(error, graph) { 
    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    var link = svg.selectAll(".link") 
     .data(graph.links) 
    .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

    var node = svg.selectAll(".node") 
     .data(graph.nodes) 
    .enter().append("rect") 
     .attr("class", "node") 
     .attr("width", 10) 
     .attr("height", 10) 
     .style("fill", function(d) { return color(d.group); }) 
     .call(force.drag); 

    node.append("title") 
     .text(function(d) { return d.name; }); 

    force.on("tick", function() { 
    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; }); 

    node.attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }); 
    }); 
});

如。將circle更改爲rect。刪除r屬性。添加width和height attibutes。將fdg中的cx和cy更改爲x和y。

來源

2013-07-25 10:20:37 RickyA

您製作了正方形而不是矩形：P – Joum

@Journ廣場是一個特例一個矩形;） – RickyA

您必須附加一個rect SVG元素，而不是circle。

所以，在劇本，它表明這一點：

var node = svg.selectAll(".node") 
     .data(graph.nodes) 
    .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", 5) 
     .style("fill", function(d) { return color(d.group); }) 
     .call(force.drag);

你應該改變它，也許這：

var node = svg.selectAll(".node") 
     .data(graph.nodes) 
    .enter().append("rect") 
     .attr("class", "node") 
     .attr("width", 40) 
     .attr("height", 20) 
     .style("fill", function(d) { return color(d.group); }) 
     .call(force.drag);

，並在它顯示：

node.attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; });

將其更改爲：

node.attr("x", function(d) { return d.x; }) 
    .attr("y", function(d) { return d.y; });

來源

2013-07-25 10:23:20 Joum

非常感謝你..... –

如果它幫助/解決了你的問題，請投票/接受答案。 – Joum

你可以請讓我知道如何顯示一個彈出塊單擊任何節點上顯示所有的細節，如他的名字他的地址他的教育....如果你有任何聚類示例，請分享謝謝你，你是一個偉大的幫助我 –

Here is a simple example of using Rectangles with a json file : 

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.link { 
    stroke: #000; 
    stroke-width: 1.5px; 
} 

.node { 
    cursor: move; 
    fill: #ccc; 
    stroke: #000; 
    stroke-width: 1.5px; 
} 

.node.fixed { 
    fill: #f00; 
} 

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

<script> 

var width = 960, 
    height = 800; 

var force = d3.layout.force() 
    .size([width, height]) 
    .charge(-400) 
    .linkDistance(100) 
    .on("tick", tick); 

var drag = force.drag(); 
    //.on("dragstart", dragstart); 

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

var link = svg.selectAll(".link"), 
    node = svg.selectAll(".node"); 

d3.json("graph.json", function(error, graph) { 
    if (error) throw error; 

    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    link = link.data(graph.links) 
    .enter().append("line") 
     .attr("class", "link"); 

    node = node.data(graph.nodes) 
     .enter().append("rect") 
     .attr("class", "node") 
     .attr("width", 60) 
     .attr("height", 60) 
     .on("dblclick", dblclick) 
     .call(drag); 
}); 

function tick() { 
    link.attr("x1", function(d) { return d.source.x+25; }) 
     .attr("y1", function(d) { return d.source.y+25; }) 
     .attr("x2", function(d) { return d.target.x+25; }) 
     .attr("y2", function(d) { return d.target.y+25; }); 

    node.attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }); 
} 

function dblclick(d) { 
    d3.select(this).classed("fixed", d.fixed = false); 
} 

function dragstart(d) { 
    d3.select(this).classed("fixed", d.fixed = true); 
} 

</script> 

The Json file is bellow. Give the exact path of your json file in the code: 

{ 
    "nodes": [ 
    {"x": 469, "y": 410}, 
    {"x": 493, "y": 364}, 
    {"x": 442, "y": 365}, 
    {"x": 467, "y": 314}, 
    {"x": 477, "y": 248}, 
    {"x": 425, "y": 207}, 
    {"x": 402, "y": 155}, 
    {"x": 369, "y": 196}, 
    {"x": 350, "y": 148}, 
    {"x": 539, "y": 222}, 
    {"x": 594, "y": 235}, 
    {"x": 582, "y": 185}, 
    {"x": 633, "y": 200} 
    ], 
    "links": [ 
    {"source": 0, "target": 1}, 
    {"source": 0, "target": 2}, 
    {"source": 0, "target": 3}, 
    {"source": 1, "target": 4}, 
    {"source": 1, "target": 5}, 
    {"source": 2, "target": 6}, 
    {"source": 2, "target": 7}, 
    {"source": 3, "target": 8}, 
    {"source": 3, "target": 9}, 
    {"source": 4, "target": 10}, 
    {"source": 5, "target": 11}, 
    {"source": 6, "target": 12} 
    ] 
}

來源

2016-04-28 13:50:32

如何在D3強制佈局中將圓形更改爲矩形節點

回答

相關問題