Force Layout v4 with Filters v2

D3 v4 forcelayout example with dropdown filters.

forked from mbostock's block: Force Dragging I

forked from almsuarez's block: Force Layout v4 with Filters

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.links line {
	  stroke: #c1c1c1;
    stroke-width: 2px;
    pointer-events: all;
	}

.node circle {
	  pointer-events: all;
	  stroke: #777;
	  stroke-width: 1px;
	}
  
  
	div.tooltip {
    position: absolute;
    background-color: white;
    max-width; 200px;
    height: auto;
    padding: 1px;
    border-style: solid;
    border-radius: 4px;
    border-width: 1px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
    pointer-events: none;
  }

</style>
<body>
</body>
<svg width="960" height="700"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

var color = d3.scaleOrdinal(d3.schemeSet3);
color(0);
  color(1);
  color(2);
  color(3);
  color(4);
  color(5);
  color(6);
  color(7);
  color(8);
  color(9);
  color(10);

var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);
  
  
d3.json("miserables.json", function(error, graph) {
  if (error) throw error;

var currNodes = graph.nodes
  var currLinks = graph.links
  
  var nodesByGroup = d3.nest()
  .key(function(d) { return d.group; })
  .entries(graph.nodes);

simulation.force("link")
      .links(currLinks);

node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
   
  const linkedByIndex = {};
  currLinks.forEach(d => {
    linkedByIndex[`${d.source.index},${d.target.index}`] = 1;
  });
  
  console.log("Linkarray:", linkedByIndex);
  function isConnected(a, b) { 
    console.log("Item a:",a)
    console.log("Item b:",b)
    return linkedByIndex[`${a.source.index},${b.target.index}`] ||
      linkedByIndex[`${b.source.index},${a.target.index}`] || 
      a.index === b.index;
  }
  
 	function fade(opacity) {
  	return d => {
      node.style('stroke-opacity', function (o) {
        linkedByIndex[d.index, o.index]
        console.log(isConnected(d,o))
        const thisOpacity = isConnected(d, o) ? 1 : opacity;
      	this.setAttribute('fill-opacity', thisOpacity);
      	return thisOpacity;
    });

link.style('stroke-opacity', 
               o => (o.source === d || o.target === d ? 1 : opacity));
  	};
	}
  
});

var sequentialScale = d3.scaleOrdinal(d3.schemeSet3)
  .domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

var svg = d3.select("svg");

svg.append("g")
  .attr("class", "legendSequential")
  .attr("transform", "translate("+(width-140)+","+(height-300)+")");

var legendSequential = d3.legendColor()
    .shapeWidth(30)
    .cells(11)
    .orient("vertical")
		.title("Group number by color:")
		.titleWidth(100)
    .scale(sequentialScale)

svg.select(".legendSequential")
  .call(legendSequential);

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 = null;
  //d.fy = null;
}
function releasenode(d) {
    d.fx = null;
    d.fy = null;
}

</script>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js