gpt4 book ai didi

javascript - 如何使用 DIV 作为节点编写简单的 d3.js 网络图

转载 作者:行者123 更新时间:2023-11-30 16:12:02 26 4
gpt4 key购买 nike

我很难理解 D3 的工作原理。我只想使用纯 DIV(包含格式化文本)作为节点来获得一个简单的网络图(没有动画或“强制”效果)。节点不使用 SVG。

例如,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):

{
"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 代码?

最佳答案

是的,可以将预构建的 div 与 d3 的强制布局混合,然后是 SVG 行。您需要绝对定位 div。这是一个使用您的 HTML 和数据结构的简单示例。 注意,我将您的链接更改为基于 0 的数组索引:

<!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>

关于javascript - 如何使用 DIV 作为节点编写简单的 d3.js 网络图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36100152/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com