labelled force Dynamic!

This force-directed graph shows labelled edges using v4 force simulation, including end arrow markers

This is the blocks url:

/fancellu/2c782394602a93921faff74e594d1bb1

forked from fancellu's block: labelled force

forked from kiansheik's block: labelled force

<!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;
        }
      .not-hovered {
        opacity:0;
      }
      
      #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">
  
  <div id="mydivheader">Selections</div>
</div>
<svg width="960" height="600"></svg>

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');

function update(links, nodes) {
      console.log(links)
        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)
            );

var circs = node.append("circle")
            .attr("r", 5)
            .style("fill", function (d, i) {return colors(d.group);})
        		.on('mouseover', function(){d3.select(this).select('text').classed('not-hover', false)})
        		.on('mouseout', function(){d3.select(this).select('text').classed('not-hover', true) });

node.append("title")
            .text(function (d) {return d.id;});

var text = node.append("text")
            .attr("dy", -3)
            .text(function (d) {return d.name+":"+d.label;})
        		.classed('not-hover', true);

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.restart();
        };
        
        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);
    }

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>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://d3js.org/d3-selection-multi.v1.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-selection-multi.v1.js