This is a slight varation of example given by mbostock
Click on the Nodes to Zoom in. Double Click on the Nodes to Zoom out.
forked from nivas8292's block: Force Layout - Directed Graph with Customized Node and Link
Created
September 14, 2017 06:43
-
-
Save AdrienLemaire/dea49615dd9e41860f27867da2d1b727 to your computer and use it in GitHub Desktop.
Force Layout - Directed Graph with Customized Node and Link
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>D3 Force Layout Example 1</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="main.css"> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="https://d3js.org/d3-queue.v3.min.js"></script> | |
| <style> | |
| path.link { | |
| fill: none; | |
| stroke: #666; | |
| stroke-width: 1.5px; | |
| } | |
| circle { | |
| fill: #ccc; | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| text { | |
| fill: #000; | |
| font: 10px sans-serif; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var w = 800; | |
| var h = 450; | |
| var margin = { | |
| top: 20, | |
| bottom: 20, | |
| left: 20, | |
| right: 20 | |
| }; | |
| var width = w - margin.left - margin.right; | |
| var height = h - margin.top - margin.bottom; | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("id", "chart") | |
| .attr("height", h) | |
| .attr("width", w); | |
| var linkScale = d3.scale.linear() | |
| .range([0.25, 1.0]); | |
| var colorScale = d3.scale.category20(); | |
| d3.queue() | |
| .defer(d3.csv, "nodes.csv") | |
| .defer(d3.csv, "links.csv") | |
| .await(function (error, products, links) { | |
| nodes = {} | |
| products.forEach(function(node) { | |
| nodes[node.source] = { | |
| name: node.source, | |
| nodeWeight: +node.value, | |
| } | |
| }) | |
| console.log(nodes) | |
| links.forEach(function (link) { | |
| link.value = +link.value; | |
| link.source = nodes[link.source] || ( | |
| nodes[link.source] = {name: link.source, nodeWeight: 1} | |
| ); | |
| link.target = nodes[link.target] || ( | |
| nodes[link.target] = {name: link.target, nodeWeight: 1} | |
| ); | |
| }); | |
| linkScale.domain(d3.extent(links, function (d) { | |
| return d.value; | |
| })); | |
| var force = d3.layout.force() | |
| .nodes(d3.values(nodes)) | |
| .links(links) | |
| .size([width, height]) | |
| .linkDistance(60) | |
| .charge(-300) | |
| .on("tick", tick) | |
| .start(); | |
| svg.append("svg:defs").selectAll('marker') | |
| .data(['end']) | |
| .enter() | |
| .append("svg:marker") | |
| .attr('id', function (d) { | |
| return d; | |
| }) | |
| .attr('viewBox', '0 -5 10 10') | |
| .attr('refX', 15) | |
| .attr('refY', -1.5) | |
| .attr('markerWidth', 6) | |
| .attr('markerHeight', 6) | |
| .attr('orient', 'auto') | |
| .append('svg:path') | |
| .attr("d", "M0,-5L10,0L0,5"); | |
| var path = svg.append("svg:g").selectAll("path") | |
| .data(force.links()) | |
| .enter() | |
| .append("svg:path") | |
| .classed("link", true) | |
| .attr("marker-end", "url(#end)"); | |
| var node = svg.selectAll(".node") | |
| .data(force.nodes()) | |
| .enter() | |
| .append("g") | |
| .classed("node", true) | |
| .on("click", click) | |
| .on("dblclick", dblclick) | |
| .call(force.drag()); | |
| node.append("circle") | |
| .attr("r", function(d) { | |
| return d.nodeWeight * 10 | |
| }) | |
| .style("fill", function (d) { | |
| return colorScale(d.name) | |
| }); | |
| node.append("text") | |
| .attr("x", -12) | |
| .attr("dy", ".35em") | |
| .text(function (d) { | |
| return d.name; | |
| }); | |
| function tick() { | |
| path.attr("d", function (d) { | |
| var dx = d.target.x - d.source.x, | |
| dy = d.target.y - d.source.y, | |
| dr = Math.sqrt(dx * dx + dy * dy); | |
| return "M" + | |
| d.source.x + "," + d.source.y + | |
| "A" + dr + "," + dr + " 0 0,1 " + | |
| d.target.x + "," + d.target.y; | |
| }).style("opacity", function (d) { | |
| return linkScale(d.value); | |
| }); | |
| node.attr("transform", function (d) { | |
| return "translate(" + d.x + "," + d.y + ")"; | |
| }); | |
| } | |
| function click() { | |
| d3.select(this).select("text").transition() | |
| .duration(750) | |
| .attr("x", 22) | |
| .style("fill", "steelblue") | |
| .style("stroke", "lightsteelblue") | |
| .style("stroke-width", ".5px") | |
| .style("font", "20px sans-serif"); | |
| d3.select(this).select("circle").transition() | |
| .duration(750) | |
| .attr("r", 16); | |
| } | |
| function dblclick() { | |
| d3.select(this).select("text").transition() | |
| .duration(750) | |
| .attr("x", 12) | |
| .style("fill", "black") | |
| .style("stroke", "none") | |
| .style("stroke-width", "none") | |
| .style("font", "10px sans-serif"); | |
| d3.select(this).select("circle").transition() | |
| .duration(750) | |
| .attr("r", 6); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| source | target | value | |
|---|---|---|---|
| 改善グループ | MiraFlow | 0.2 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, html { | |
| margin:0; | |
| padding:0; | |
| font-family:"Arial", sans-serif; | |
| font-size:0.95em; | |
| text-align:center; | |
| } | |
| #chart { | |
| background-color:#F5F2EB; | |
| border: 1px solid #CCC; | |
| } | |
| .bar { | |
| fill:purple; | |
| shape-rendering:crispEdges; | |
| } | |
| .bar-label { | |
| text-anchor:end; | |
| fill:white; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill:none; | |
| stroke:#000; | |
| shape-rendering:crispEdges; | |
| } | |
| .gridline path, | |
| .gridline line { | |
| fill: none; | |
| stroke: #ccc; | |
| shape-rendering: crispEdges; | |
| } | |
| .trendline { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 2; | |
| /*stroke-dasharray:10;*/ | |
| } | |
| .area { | |
| fill: #ccc; | |
| stroke: #ccc; | |
| opacity: 0.25; | |
| } | |
| .donut { | |
| opacity:0.1; | |
| } | |
| .axis-label { | |
| text-anchor: middle; | |
| } | |
| .chart-header { | |
| text-transform: capitalize; | |
| font-size: 110%; | |
| } | |
| .temperature { | |
| stroke:#95cddf; | |
| stroke-width:2px; | |
| } | |
| .rain { | |
| fill:none; | |
| stroke:#cc627a; | |
| stroke-width:0.5; | |
| } | |
| #cursor { | |
| stroke: black; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| source | value | |
|---|---|---|
| Standout | 1 | |
| Chibiwork | 2 | |
| MiraFlow | 2 | |
| GoUnite | 4 | |
| Reachat | 5 | |
| Website制作 | 5 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment