use*_*479 6 javascript svg d3.js force-layout
我想通过厚度来区分链接.
我有数据.
变量" value"表示" thickness".
"值"的范围是0~1.
{"nodes":[{"name":"A", "group":1},
{"name":"B", "group":1},
{"name":"C", "group":1},
{"name":"D", "group":1},
{"name":"E", "group":1}],
"links":[{"source":0,"target":1,"value":0.9},
{"source":0,"target":2,"value":0.8},
{"source":0,"target":3,"value":0.7},
{"source":1,"target":2,"value":0.7},
{"source":2,"target":4,"value":0.2},
{"source":0,"target":4,"value":0.5}]}
我的d3.js图形代码是
<!DOCTYPE html>
<meta charset="utf-8">
<body><script src="../d3-master/d3.min.js"></script>
<head><link rel="stylesheet" type="text/css" href="../D3css/D3css.css"></head>
<script>
var width = 960,
height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.gravity(.05)
.distance(100)
.charge(-100)
.size([width, height]);
d3.json("../data/cor_test.json", function(error, json) {
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", 5);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
});
</script>
我改变了这样的代码.
但它不起作用.
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link")
.attr("stroke-width", function(d) { return d.value; });
更简单的改变:.attr("stroke-width", "5px");不起作用.
链接没有显示.
我该怎么办？
您需要先指定'stroke'属性,因为:
stroke属性的默认值为none,表示从不绘制轮廓.
请参阅文档stroke.以下是如何完成的示例:
selection
.attr('stroke', 'red')
.attr('stroke-width', 5);
这是一个展示它是如何工作的jsfiddle.
| 归档时间： |
|
| 查看次数： |
2916 次 |
| 最近记录： |