Я хотел бы визуализировать сетевые данные, которые состоят из узлов и ссылок в файле json. Я смотрю, как можно использовать D3. Я не пробовал D3, но кажется, что это хорошо для визуализации сетевых данных.
Много примеров визуализации данных с использованием D3, но я наблюдал ссылку в примере файла json всегда на основе источника и цели или узлов на основе индекса ....
Если в моем файле json нет исходного и целевого ключей, а вместо этого используется ключ источника и назначения или узлы json и ссылки только содержат значения ... могу ли я использовать D3 ..?
Я ожидаю, что смогу отредактировать D3 так, чтобы он следовал моим данным или как-то иначе? .. Я не уверен, как вписать свои данные json в структуру D3. Я просмотрел документацию по D3 и некоторые примеры, но немного потерял, куда идти ... Спасибо, кто-то может посоветовать мне дальше. Спасибо
Пожалуйста, найдите пример данных JSON, которые у меня есть
SAMPLE1 (только значения узлов и ссылок):
{"nodes":["ser1","ser2","ser3","ser4","ser5"],"links":[["ser1","ser3",10],
["ser1","ser5",30],["ser2","ser3",11],["ser3","ser4",10],
["ser3","ser5",20],["ser2","ser5",30]]}
{
"nodes": [
"ser1",
"ser2",
"ser3",
"ser4",
"ser5"
],
"links": [
[
"ser1",
"ser3",
10
],
[
"ser1",
"ser5",
30
],
[
"ser2",
"ser3",
11
],
[
"ser3",
"ser4",
10
],
[
"ser3",
"ser5",
20
],
[
"ser2",
"ser5",
30
]
]
}
SAMPLE2 (ключи и значения узлов и ссылок:
{"nodes":[{"name":"ser1"},{"name":"ser2"},{"name":"ser3"},{"name":"ser4"},
{"name":"ser5"}],"links":[{"source":"ser1","dest":"ser3","value":"10"},
{"source":"ser1","dest":"ser5","value":"10"},
{"source":"ser2","dest":"ser4","value":"30"},
{"source":"ser3","dest":"ser4","value":"10"},
{"source":"ser3","dest":"ser5","value":"10"}]}
{
"nodes": [
{
"name": "ser1"
},
{
"name": "ser2"
},
{
"name": "ser3"
},
{
"name": "ser4"
},
{
"name": "ser5"
}
],
"links": [
{
"source": "ser1",
"dest": "ser3",
"value": "10"
},
{
"source": "ser1",
"dest": "ser5",
"value": "10"
},
{
"source": "ser2",
"dest": "ser4",
"value": "30"
},
{
"source": "ser3",
"dest": "ser4",
"value": "10"
},
{
"source": "ser3",
"dest": "ser5",
"value": "10"
}
]
}
my index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
text {
font-family: sans-serif;
font-size: 10px;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.name; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = getData();
graph.links = graph.links.map(function(ele) {return {
source: ele.source, target: ele.dest, value: +ele.value
}
});
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.name); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var lables = node.append("text")
.text(function(d) {
return d.name;
})
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) { return d.name; });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
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 + ")";
})
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
function getData() {
let json = {"nodes":[{"name":"ser1"},{"name":"ser2"},{"name":"ser3"},{"name":"ser4"},
{"name":"ser5"}],"links":[{"source":"ser1","dest":"ser3","value":"10"},
{"source":"ser1","dest":"ser5","value":"10"},
{"source":"ser2","dest":"ser4","value":"30"},
{"source":"ser3","dest":"ser4","value":"10"},
{"source":"ser3","dest":"ser5","value":"10"}]};
return json;
}
</script>
мои выводы ниже
(1) Подходит только структура sample2 (данные json) и может помещаться на D3 (график силы направленности) (2) Чтобы использовать шаблон D3, измените (i) id = ключ узла (ii) добавьте graph.link = graph.links.map (function (ele) {return {source: ele.source, target: ele.dest, value: + ele.value}}); ((3) данные Json могут быть внутренними или внешними источниками (4) D3 может предоставить больше значений / информации на основе имеющихся у нас данных