JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <svg id="content" width="800" height="400" ></svg>

JavaScript

data_set = [			{name:"aaa", val:58, col:100},
                  {name:"bbb", val:88, col:200},
                  {name:"ccc", val:48, col:300},
                  {name:"ddd", val:73, col:400},
                  {name:"eee", val:81, col:500},
                  {name:"fff", val:31, col:600}  ]  ;
                 
var width=600, height=300;

var force_g = d3.select("#content")
	.append("g")
  ;
var circles =  force_g.selectAll("circle")
  .data(data_set)
  .enter()
  .append("circle")
  .attr("class","test-circle")
  .attr("r", function(d){ return d.val/2; })
  .attr("fill","lightblue")
        .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));
  ;


var line_force = d3.forceSimulation()
	.nodes(data_set)
  .on("tick", ticked)
  .force("center", d3.forceCenter(width/2, height/2))
  .force('charge', d3.forceManyBody().strength(5))
  .force("collision", d3.forceCollide(function(d){return d.val/2;}))
  .force("y", d3.forceY().y(150))
  ;

function dragstarted(d) {
  if (!d3.event.active) line_force.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) line_force.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

function ticked(){
	circles
  	.attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; }) ;
    }