如何使用DIV作为节点编写简单的d3.js网络图 [英] How to code a simple d3.js network graph using DIVs as nodes
问题描述
我很难理解D3的工作原理.我只想使用简单的DIV(包含格式化的文本)作为节点，得到一个简单的网络图(没有动画也没有力"效果).不得将SVG用于节点.
I have a hard time understanding how D3 works. I'd just like to get a simple network graph (without animation nor "force" effects) using plain DIVs (containing formatted text) as nodes. No SVG is to be used for nodes.
DIV例如:
<div id="div1">One</div>
<div id="div2"><b>Two</b></div>
<div id="div3"><span style="color: red;">Three</span></div>
<div id="div4"><p class="someclass">Four</p></div>
DIV/节点之间的链接将类似于以下内容(可能是伪JSON):
The links between DIVs/nodes would be something like this (which is probably pseudo-JSON):
{
"myDIVs":[
{"name":"div1"},
{"name":"div2"},
{"name":"div3"},
{"name":"div4"}
],
"myLinks":[
{"source":1,"target":2},
{"source":1,"target":3},
{"source":2,"target":1},
{"source":4,"target":3}
]
}
什么是正确的D3代码?
What would be the right D3 code?
推荐答案
是的，可以将预构建的div与d3的力布局以及SVG线混合使用.您需要绝对定位div.这是一个使用您的HTML和数据结构的简单示例. 注意，我将您的链接更改为基于0的数组索引:
Yes, it is possible to mix pre-build divs with d3's force layout and then SVG lines. You would need to absolutely position the divs. Here's a quick example, using your HTML and data structure. Note, I changed your links to 0 based array indexes:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
.node {
fill: #ccc;
stroke: #fff;
stroke-width: 2px;
}
.link {
stroke: #777;
stroke-width: 2px;
}
</style>
</head>
<body>
<div id="div1">One</div>
<div id="div2"><b>Two</b></div>
<div id="div3"><span style="color: red;">Three</span></div>
<div id="div4">
<p class="someclass">Four</p>
</div>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script>
var width = 400,
height = 400;
var data = {
"myDIVs": [{
"name": "div1"
}, {
"name": "div2"
}, {
"name": "div3"
}, {
"name": "div4"
}],
"myLinks": [{
"source": 0,
"target": 1
}, {
"source": 0,
"target": 2
}, {
"source": 1,
"target": 0
}, {
"source": 3,
"target": 2
}]
};
var nodes = data.myDIVs,
links = data.myLinks;
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)
.linkDistance(250)
.charge(-50);
var link = svg.selectAll('.link')
.data(links)
.enter().append('line')
.attr('class', 'link');
var node = d3.selectAll('div')
.data(nodes)
.each(function(d) {
var self = d3.select('#' + d.name);
self.style("position", "absolute");
});
force.on('end', function() {
node
.style('left', function(d) {
return d.x + "px";
})
.style('top', function(d) {
return d.y + "px";
});
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();
for (var i = 0; i < 100; ++i) force.tick();
force.stop();
</script>
</body>
</html>
这篇关于如何使用DIV作为节点编写简单的d3.js网络图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
