Klar:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>var myjson ='{\"nodes\":[{\"id\":\"Node 4\",\"name\":\"Z-Wave Switch Mediawand ganz rechts (NodeID 004)\",\"group\":1},{\"id\":\"Node 19\",\"name\":\"Z-Wave Switch (NodeID 019) Fake TV +\",\"group\":1},{\"id\":\"Node 2\",\"name\":\"Z-Wave Binary Sensor Fibaro Motion (NodeID 002)\",\"group\":1},{\"id\":\"Node 10\",\"name\":\"Z-Wave Switch (NodeID 010) Zwischenstecker 2 Spot\",\"group\":1},{\"id\":\"Node 12\",\"name\":\"Z-Wave Switch (NodeID 012) SteckdoseTerasse Ost\",\"group\":1},{\"id\":\"Node 5\",\"name\":\"Z-Wave Switch (NodeID 005) Stehlampe links\",\"group\":1},{\"id\":\"Node 3\",\"name\":\"Z-Wave Dimmer (NodeID 003)\",\"group\":1}],\"links\":[{\"source\":\"Node 4\",\"target\":\"Node 2\",\"value\":1},{\"source\":\"Node 4\",\"target\":\"Node 3\",\"value\":1},{\"source\":\"Node 4\",\"target\":\"Node 5\",\"value\":1},{\"source\":\"Node 4\",\"target\":\"Node 6\",\"value\":1},{\"source\":\"Node 4\",\"target\":\"Node 10\",\"value\":1},{\"source\":\"Node 4\",\"target\":\"Node 12\",\"value\":1},{\"source\":\"Node 4\",\"target\":\"Node 19\",\"value\":1},{\"source\":\"Node 19\",\"target\":\"Node 3\",\"value\":1},{\"source\":\"Node 19\",\"target\":\"Node 4\",\"value\":1},{\"source\":\"Node 19\",\"target\":\"Node 5\",\"value\":1},{\"source\":\"Node 19\",\"target\":\"Node 6\",\"value\":1},{\"source\":\"Node 19\",\"target\":\"Node 10\",\"value\":1},{\"source\":\"Node 19\",\"target\":\"Node 12\",\"value\":1},{\"source\":\"Node 2\",\"target\":\"Node 4\",\"value\":1},{\"source\":\"Node 2\",\"target\":\"Node 5\",\"value\":1},{\"source\":\"Node 2\",\"target\":\"Node 6\",\"value\":1},{\"source\":\"Node 2\",\"target\":\"Node 12\",\"value\":1},{\"source\":\"Node 10\",\"target\":\"Node 3\",\"value\":1},{\"source\":\"Node 10\",\"target\":\"Node 4\",\"value\":1},{\"source\":\"Node 10\",\"target\":\"Node 5\",\"value\":1},{\"source\":\"Node 10\",\"target\":\"Node 12\",\"value\":1},{\"source\":\"Node 10\",\"target\":\"Node 19\",\"value\":1},{\"source\":\"Node 12\",\"target\":\"Node 2\",\"value\":1},{\"source\":\"Node 12\",\"target\":\"Node 3\",\"value\":1},{\"source\":\"Node 12\",\"target\":\"Node 4\",\"value\":1},{\"source\":\"Node 12\",\"target\":\"Node 5\",\"value\":1},{\"source\":\"Node 12\",\"target\":\"Node 6\",\"value\":1},{\"source\":\"Node 12\",\"target\":\"Node 10\",\"value\":1},{\"source\":\"Node 12\",\"target\":\"Node 19\",\"value\":1},{\"source\":\"Node 5\",\"target\":\"Node 2\",\"value\":1},{\"source\":\"Node 5\",\"target\":\"Node 3\",\"value\":1},{\"source\":\"Node 5\",\"target\":\"Node 4\",\"value\":1},{\"source\":\"Node 5\",\"target\":\"Node 6\",\"value\":1},{\"source\":\"Node 5\",\"target\":\"Node 10\",\"value\":1},{\"source\":\"Node 5\",\"target\":\"Node 12\",\"value\":1},{\"source\":\"Node 5\",\"target\":\"Node 19\",\"value\":1},{\"source\":\"Node 3\",\"target\":\"Node 4\",\"value\":1},{\"source\":\"Node 3\",\"target\":\"Node 5\",\"value\":1},{\"source\":\"Node 3\",\"target\":\"Node 6\",\"value\":1},{\"source\":\"Node 3\",\"target\":\"Node 10\",\"value\":1},{\"source\":\"Node 3\",\"target\":\"Node 12\",\"value\":1},{\"source\":\"Node 3\",\"target\":\"Node 19\",\"value\":1}]}';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().distance(80).id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = JSON.parse(myjson);
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("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.on("dblclick", connectedNodes);
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return 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;
}
//Toggle stores whether the highlighting is on
var toggle = 0;
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < graph.nodes.length; i++) {
linkedByIndex[i + "," + i] = 1;
};
graph.links.forEach(function (d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
return linkedByIndex[a.index + "," + b.index];
}
function connectedNodes() {
if (toggle == 0) {
//Reduce the opacity of all but the neighbouring nodes
d = d3.select(this).node().__data__;
node.style("opacity", function (o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
});
link.style("opacity", function (o) {
return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
});
//Reduce the op
toggle = 1;
} else {
//Put them back to opacity=1
node.style("opacity", 1);
link.style("opacity", 1);
toggle = 0;
}
}
</script>
hardlog