<!DOCTYPE html> <meta charset="utf-8"> <style> .node { stroke: #fff; stroke-width: 1.5px; } .link { fill: none; stroke: #bbb; } </style> <svg width="1000" height="1000"></svg> <script src="https://d3js.org/d3.v4.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().distance(1).strength(1)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); d3.json("https://feastmeatswest.com/wp-content/uploads/tests/chefs.json", function(error, graph) { if (error) throw error; var nodes = graph.nodes, nodeById = d3.map(nodes, function(d) { return d.id; }), links = graph.links, bilinks = []; links.forEach(function(link) { var s = link.source = nodeById.get(link.source), t = link.target = nodeById.get(link.target), i = {}; // intermediate node nodes.push(i); links.push({source: s, target: i}, {source: i, target: t}); bilinks.push([s, i, t]); }); var link = svg.selectAll(".link") .data(bilinks) .enter().append("path") .attr("class", "link"); var node = svg.selectAll(".node") .data(nodes.filter(function(d) { return d.id; })) .enter().append("circle") .attr("class", "node") .attr("r", 5) .attr("fill", function(d) { return color(d.group); }) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); node.append("title") .text(function(d) { return d.id; }); node.append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.id; }) .style("stroke", "black") .style("stroke-width", 0.5); simulation .nodes(nodes) .on("tick", ticked); simulation.force("link") .links(links); function ticked() { link.attr("d", positionLink); node.attr("transform", positionNode); } }); function positionLink(d) { return "M" + d[0].x + "," + d[0].y + "S" + d[1].x + "," + d[1].y + " " + d[2].x + "," + d[2].y; } function positionNode(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 mouseOver(opacity) { return function(d) { // check all other nodes to see if they're connected // to this one. if so, keep the opacity at 1, otherwise // fade node.style("stroke-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); node.style("fill-opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; return thisOpacity; }); // also style link accordingly link.style("stroke-opacity", function(o) { return o.source === d || o.target === d ? 1 : opacity; }); link.style("stroke", function(o){ return o.source === d || o.target === d ? o.source.colour : "#ddd"; }); }; } function mouseOut() { node.style("stroke-opacity", 1); node.style("fill-opacity", 1); link.style("stroke-opacity", 1); link.style("stroke", "#ddd"); } </script>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more