D3 Examples - labelled force

xxxxxxxxxx
 
<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .node {}
​
        .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
      
.hull {
  opacity: 0.23;
  stroke-width: 2px;
  stroke-linejoin: round;
}
​
        .lasso path {
            stroke: rgb(80,80,80);
            stroke-width:2px;
        }
​
        .lasso .drawn {
            fill-opacity:.05 ;
        }
​
        .lasso .loop_close {
            fill:none;
            stroke-dasharray: 4,4;
        }
​
        .lasso .origin {
            fill:#3399FF;
            fill-opacity:.5;
        }
​
        .not_possible {
            fill: rgb(200,200,200);
        }
​
        .possible {
            fill: #EC888C;
        }
​
        .selected {
            fill: steelblue;
        }
      
      #mydiv {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    text-align: center;
}
​
#mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}
    </style>
</head>
<body>
  <div id="mydiv">
  <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
  <div id="mydivheader">Selections</div>
</div>
<svg width="960" height="600"></svg>
​
<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
<script src="https://d3js.org/d3-selection-multi.v1.js"></script>
<script src="d3-lasso.min.js"></script>
  
<script type="text/javascript">
  
  
  function getTranslation(transform) {
  // Create a dummy g for calculation purposes only. This will never
  // be appended to the DOM and will be discarded once this function 
  // returns.
  var g = document.createElementNS("https://www.w3.org/2000/svg", "g");
  
  // Set the transform attribute to the provided string value.
  g.setAttributeNS(null, "transform", transform);
  
  // consolidate the SVGTransformList containing all transformations
  // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get
  // its SVGMatrix. 
  var matrix = g.transform.baseVal.consolidate().matrix;
  
  // As per definition values e and f are the ones for the translation.
  return [matrix.e, matrix.f];
}
  
    var selections = [], hulls = [];
    var colors = d3.scaleOrdinal(d3.schemeCategory10);
​
    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        node,
        link;
​
    svg.append('defs').append('marker')
//         .attrs({'id':'arrowhead',
//             'viewBox':'-0 -5 10 10',
//             'refX':13,
//             'refY':0,
//             'orient':'auto',
//             'markerWidth':13,
//             'markerHeight':13,
//             'xoverflow':'visible'})
//         .append('svg:path')
//         .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
//         .attr('fill', '#999')
//         .style('stroke','none');
​
    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().id(function (d) {return d.id;}).distance(100).strength(0.1))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(width / 2, height / 2));
​
    d3.json("graph.json", function (error, graph) {
        if (error) throw error;
        update(graph.links, graph.nodes);
    })
​
    function update(links, nodes) {
        link = svg.selectAll(".link")
            .data(links)
            .enter()
            .append("line")
            .attr("class", "link")
            .attr('marker-end','url(#arrowhead)')
​
        link.append("title")
            .text(function (d) {return d.type;});
​
        edgepaths = svg.selectAll(".edgepath")
            .data(links)
            .enter()
            .append('path')
            .attrs({
                'class': 'edgepath',
                'fill-opacity': 0,
                'stroke-opacity': 0,
                'id': function (d, i) {return 'edgepath' + i}
            })
            .style("pointer-events", "none");
​
        edgelabels = svg.selectAll(".edgelabel")
            .data(links)
            .enter()
            .append('text')
            .style("pointer-events", "none")
            .attrs({
                'class': 'edgelabel',
                'id': function (d, i) {return 'edgelabel' + i},
                'font-size': 10,
                'fill': '#aaa'
            });
​
        edgelabels.append('textPath')
            .attr('xlink:href', function (d, i) {return '#edgepath' + i})
            .style("text-anchor", "middle")
            .style("pointer-events", "none")
            .attr("startOffset", "50%")
            .text(function (d) {return d.type});
​
        node = svg.selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .call(d3.drag()
                    .on("start", dragstarted)
                    .on("drag", dragged)
                    //.on("end", dragended)
            );
​
        node.append("circle")
            .attr("r", 5)
            .style("fill", function (d, i) {return colors(d.group);})
​
        node.append("title")
            .text(function (d) {return d.id;});
​
        node.append("text")
            .attr("dy", -3)
            .text(function (d) {return d.name+":"+d.label;});
​
        simulation
            .nodes(nodes)
            .on("tick", ticked);
​
        simulation.force("link")
            .links(links);
      // Lasso functions
        var lasso_start = function() {
          simulation.stop();
            lasso.items()
                .classed("not_possible",true)
                .classed("selected",false)
                    .selectAll('circle')
                .attr("r",5); // reset size
        };
​
        var lasso_draw = function() {
        
            // Style the possible dots
            lasso.possibleItems()
                .classed("not_possible",false)
                .classed("possible",true);
​
            // Style the not possible dot
            lasso.notPossibleItems()
                .classed("not_possible",true)
                .classed("possible",false);
        };
​
        var lasso_end = function() {
            if(lasso.selectedItems()._groups[0].length > 0){
              // Reset the color of all dots
              lasso.items()
                  .classed("not_possible",false)
                  .classed("possible",false);
​
              // Style the selected dots
              lasso.selectedItems()
                  .classed("selected"+(selections.length+1),true)
                  .selectAll('circle')
                  .attr("r",7);
              d3.select('#mydiv')
                .append('p')
                .classed('selectionRow'+(selections.length+1),true)
                .text('Group '+(selections.length+1))
                .style('color', colors(selections.length+1));
              hulls.push(svg.insert("path", ":first-child")
                                 .attr("class", "hull"+(selections.length+1))
                        .classed('hull', true));
              
              selections.push(lasso.selectedItems());
//color dots to hull groups
//               for(var i=0;i<selections.length;i++){
//                 var selgroup = d3.selectAll(".selected"+selections.length);
//                 selgroup.select('circle')
//                     .attr('fill', colors(i+1));
//               }
              // Reset the style of the not selected dots
              lasso.notSelectedItems()
                  .selectAll('circle')
                  .attr("r",5);
                            drawHulls();
          }
          simulation.r();
        };
        
        var lasso = d3.lasso()
            .closePathSelect(true)
            .closePathDistance(100)
            .items(node)
            .targetArea(svg)
            .on("start",lasso_start)
            .on("draw",lasso_draw)
            .on("end",lasso_end);
        
        svg.call(lasso);
    }
​
  function drawHulls(){
    for(var i=0;i<selections.length;i++){
      var vertices = selections[i]._groups[0].map(function(d){return getTranslation(d3.select(d).attr('transform'))});
      var cHull = d3.polygonHull(vertices);
      if(vertices.length >=3){
        hulls[i]
          .datum(cHull)
          .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
          .attr('fill', colors(i+1));
      }
    }
  }
  
    function ticked() {
        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("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
​
        edgepaths.attr('d', function (d) {
            return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
        });
​
        edgelabels.attr('transform', function (d) {
            if (d.target.x < d.source.x) {
                var bbox = this.getBBox();
​
                rx = bbox.x + bbox.width / 2;
                ry = bbox.y + bbox.height / 2;
                return 'rotate(180 ' + rx + ' ' + ry + ')';
            }
            else {
                return 'rotate(0)';
            }
        });
      drawHulls();
    }
​
    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 = undefined;
//        d.fy = undefined;
//    }
​
  
  
  
  // Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));
​
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV: 
    elmnt.onmousedown = dragMouseDown;
  }
​
  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }
​
  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }
​
  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>
​
</body>
</html>
    