D3 Examples - [dots] 03 - Labeled grouped dots (d3 v4)

xxxxxxxxxx
 
<!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 circle_radius = 8;
  
    var labels = ['abcdf','efgh','ijkl','mnop','qrst','uvwx', 'yz']
    var groups = labels.length;
  
    main();
    
    function main() {
        var range = 100
        var data = {
            nodes:d3.range(0, range)
                            .map(function(d){ return {id: d, 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(circle_radius))
            .force("charge", d3.forceManyBody())
            .force("center", d3.forceCenter(chartWidth / 2, chartHeight / 2))
            .force("y", d3.forceY(0))
            .force("x", d3.forceX(0))
                
        // circles
        var node = svg.append("g")
            .attr("class", "nodes")
            .selectAll("circle")
            .data(data.nodes)
            .enter().append("circle")
            .attr("r", circle_radius)
                        .style("fill", function(d, i) { return color(d.group); })        
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended)); 
​
      var rect = svg.append("g")
            .attr("class", "rects")
            .selectAll("rect")
            .data(data.nodes)
            .enter().append("rect")
                .attr("fill", "white")
                .attr("fill-opacity", 0.4)
            .attr("width", 75)
            .attr("height", 25)
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended)); 
​
​
      var text = svg.append("g")
            .attr("class", "labels")
            .selectAll("text")
            .data(data.nodes)
            .enter().append("text")
                .style("font-size", 24)
            .attr("dx", 12)
            .attr("dy", ".35em")
            .text(function(d) { return labels[d.id] });
​
      
        var ticked = function() {
            node
                .attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
            text
                .attr("x", function(d) { return d.x - 30; })
                .attr("y", function(d) { return d.y; });
            rect
                .attr("x", function(d) { return d.x - 30; })
                .attr("y", function(d) { return d.y - 12; })
                
                .attr("fill-opacity", function(d) {
                        var opacity = 0.0;
                        if (d.id < labels.length ) {
                            opacity = 0.4
                        }
                        return opacity; 
                      });
        };
​
        simulation.nodes(data.nodes).on("tick", ticked);
      
                //ties the circles together
        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>
​
    