| license: gpl-3.0 |
Dots colored by a property named group.
Dots can be dragged like in my Draggable dots block.
forked from mbostock's block: Collision Detection
with code from mbostock's block: Multi-Foci Force Layout
forked from ocarneiro's block: Grouped dots
forked from ocarneiro's block: simple group d3 v4
forked from shimizu's block: D3 v4 - force layout
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"/> | |
| <title>D3 v4 - force layout</title> | |
| <style> | |
| html, body, #graph { | |
| width: 900px; | |
| height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="graph"></div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| !(function(){ | |
| "use strict" | |
| var width,height | |
| var chartWidth, chartHeight | |
| var margin | |
| var svg = d3.select("#graph").append("svg") | |
| var chartLayer = svg.append("g").classed("chartLayer", true) | |
| // escala com 10 cores (category10) | |
| var color = d3.scaleOrdinal(d3.schemeCategory10); | |
| var groups = 6; | |
| main(); | |
| function main() { | |
| var range = 100 | |
| var data = { | |
| nodes:d3.range(0, range) | |
| .map(function(d){ return {id: d, r:9, group: d%groups}}), | |
| links:d3.range(range) | |
| .map(function(i) { | |
| return { | |
| source: i%groups, | |
| target: i | |
| }; | |
| })}; | |
| setSize() | |
| drawChart(data) | |
| } | |
| function setSize() { | |
| width = document.querySelector("#graph").clientWidth | |
| height = document.querySelector("#graph").clientHeight | |
| margin = {top:0, left:0, bottom:0, right:0 } | |
| chartWidth = width - (margin.left+margin.right) | |
| chartHeight = height - (margin.top+margin.bottom) | |
| svg.attr("width", width).attr("height", height) | |
| chartLayer | |
| .attr("width", chartWidth) | |
| .attr("height", chartHeight) | |
| .attr("transform", "translate("+[margin.left, margin.top]+")") | |
| } | |
| function drawChart(data) { | |
| var simulation = d3.forceSimulation() | |
| .force("link", d3.forceLink().id(function(d) { return d.index }) | |
| .distance(20)) | |
| .force("collide",d3.forceCollide(function(d){return d.r})) | |
| //.force("link", d3.forceLink(data.links).distance(20).strength(1)) | |
| .force("charge", d3.forceManyBody()) | |
| .force("center", d3.forceCenter(chartWidth / 2, chartHeight / 2)) | |
| .force("y", d3.forceY(0)) | |
| .force("x", d3.forceX(0)) | |
| var link = svg.append("g") | |
| .attr("class", "links") | |
| .selectAll("line") | |
| .data(data.links) | |
| .enter() | |
| .append("line") | |
| .attr("stroke", "black") | |
| var node = svg.append("g") | |
| .attr("class", "nodes") | |
| .selectAll("circle") | |
| .data(data.nodes) | |
| .enter().append("circle") | |
| .attr("r", function(d){ return d.r }) | |
| .style("fill", function(d, i) { return color(d.group); }) | |
| .call(d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended)); | |
| var ticked = function() { | |
| /* | |
| 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; }); | |
| }; | |
| simulation.nodes(data.nodes).on("tick", ticked); | |
| simulation.force("link").links(data.links); | |
| function dragstarted(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0.5).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; | |
| } | |
| } | |
| }()); | |
| </script> | |
| </body> | |
| </html> |