我对以下代码有疑问......
基本上我想要做的是在两个节点之间的边缘添加值，即属性值，并在矩形内添加一些文本，你能否建议在这里需要做什么？
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@*" data-semver="3.2.2" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.min.js"></script>
<script data-require="d3@*" data-semver="3.2.2" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
</head>
<body>
<script>
var width = 800,
height = 500,
nodeWidth = 20,
nodeHeight = 20;
var fill = d3.scale.category10();
var nodes = d3.range(100).map(function(i) {
return {index: i};
});
var force = d3.layout.force()
.charge(-1000)
.gravity(0.2)
.linkDistance(30)
.size([width, height])
var first = 1;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("data.json", function(error, graph) {
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", 2 );
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("rect")
.attr("class", "node")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("width", nodeWidth)
.attr("height", nodeHeight)
.style("fill", function(d, i) { return fill(i & 3); })
.style("stroke", function(d, i) { return d3.rgb(fill(i & 3)).darker(2); })
.call(force.drag)
.on("mousedown", function() { d3.event.stopPropagation(); });
force
.nodes(graph.nodes)
.links(graph.links)
.on("tick", tick)
.start();
setTimeout(function() {
first = 0;
force.start();
}, 6000);
function tick(e) {
if(first) {
var k = e.alpha;
}
else{
var k = 10 * e.alpha;
}
graph.nodes.forEach(function(o, i) {
o.y += (y(o.level) - o.y) * k;
});
link.attr("x1", function(d) { return d.source.x + nodeWidth/2; })
.attr("y1", function(d) { return d.source.y + nodeHeight/2; })
.attr("x2", function(d) { return d.target.x + nodeWidth/2; })
.attr("y2", function(d) { return d.target.y + nodeHeight/2; });
node.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
}
});
svg.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 1);
d3.select("body")
.on("mousedown", mousedown);
var y = d3.scale.ordinal()
.domain(d3.range(5))
.rangePoints([0, 100 * 5], 1);
function mousedown() {
nodes.forEach(function(o, i) {
o.x += (Math.random() - .5) * 40;
o.y += (Math.random() - .5) * 40;
});
force.resume();
}
</script>
</body>
</html>
数据源如下
{
"nodes": [{
"_id": 29,
"gender": "female",
"level": 2
}, {
"_id": 18,
"gender": "male",
"level": 3
}, {
"_id": 191,
"gender": "male",
"level": 1
}, {
"_id": 53,
"gender": "male",
"level": 2
}, {
"_id": 169,
"gender": "female",
"level": 1
}, {
"_id": 180,
"gender": "male",
"level": 1
}, {
"_id": 202,
"gender": "female",
"level": 1
}, {
"_id": 213,
"gender": "male",
"level": 2
}, {
"_id": 224,
"gender": "female",
"level": 2
}, {
"_id": 254,
"gender": "male",
"level": 3
}, {
"_id": 276,
"gender": "male",
"level": 3
}, {
"_id": 287,
"gender": "female",
"level": 3
}, {
"_id": 298,
"gender": "male",
"level": 2
}, {
"_id": 324,
"gender": "male",
"level": 3
}, {
"_id": 335,
"gender": "female",
"level": 3
}, {
"_id": 346,
"gender": "male",
"level": 3
}, {
"_id": 357,
"gender": "female",
"level": 4
}, {
"_id": 368,
"gender": "female",
"level": 4
}, {
"_id": 379,
"gender": "female",
"level": 3
}, {
"_id": 390,
"gender": "female",
"level": 0
}, {
"_id": 401,
"gender": "male",
"level": 0
}, {
"_id": 412,
"gender": "female",
"level": 0
}, {
"_id": 423,
"gender": "male",
"level": 0
}, {
"_id": 434,
"gender": "male",
"level": 0
}, {
"_id": 445,
"gender": "female",
"level": 0
}, {
"_id": 456,
"gender": "female",
"level": 0
}, {
"_id": 733,
"gender": "female",
"level": 2
}, {
"_id": 800,
"gender": "male",
"level": 2
}, {
"_id": 825,
"gender": "female",
"level": 2
}],
"links": [{
"_id": 28,
"source": 0,
"target": 1
}, {
"_id": 52,
"source": 1,
"target": 3
}, {
"_id": 151,
"source": 0,
"target": 3
}, {
"_id": 168,
"target": 0,
"source": 4
}, {
"_id": 179,
"source": 0,
"target": 5
}, {
"_id": 190,
"source": 2,
"target": 3
}, {
"_id": 201,
"target": 3,
"source": 6
}, {
"_id": 212,
"source": 2,
"target": 7
}, {
"_id": 223,
"source": 2,
"target": 8
}, {
"_id": 249,
"target": 2,
"source": 6
}, {
"_id": 253,
"source": 7,
"target": 9
}, {
"_id": 275,
"source": 8,
"target": 10
}, {
"_id": 286,
"target": 8,
"source": 11
}, {
"_id": 297,
"source": 8,
"target": 12
}, {
"_id": 323,
"source": 0,
"target": 13
}, {
"_id": 334,
"source": 0,
"target": 14
}, {
"_id": 345,
"target": 0,
"source": 15
}, {
"_id": 356,
"source": 13,
"target": 16
}, {
"_id": 367,
"source": 13,
"target": 17
}, {
"_id": 378,
"target": 13,
"source": 18
}, {
"_id": 389,
"target": 4,
"source": 19
}, {
"_id": 400,
"source": 4,
"target": 20
}, {
"_id": 411,
"source": 5,
"target": 21
}, {
"_id": 422,
"target": 5,
"source": 22
}, {
"_id": 433,
"target": 2,
"source": 23
}, {
"_id": 444,
"source": 2,
"target": 24
}, {
"_id": 455,
"source": 6,
"target": 25
}, {
"_id": 466,
"source": 4,
"target": 5
}, {
"_id": 732,
"target": 2,
"source": 26
}, {
"_id": 799,
"source": 5,
"target": 27
}, {
"_id": 808,
"target": 4,
"source": 27
}, {
"_id": 824,
"target": 27,
"source": 28
}],
"levels": [0, -1, -2, 1, -3]
}