chart = { const matrixLayout = adjacencyMatrix() .size([width/2 - margin,height-margin]); const data = matrixLayout(labels, inputMatrix); let dataFiltered = data; color.domain([0, d3.max(data, d => d.value)]); const svg = d3.create("svg").attr("width",width).attr("height",height); const chart_adj = svg.append("g").attr("transform", `translate(${[margin/2,margin/2]})`); const chart_graph = svg.append("g").attr("transform", `translate(${[width/2 + margin/2, margin/2]})`); drawNetwork(data); const brush = d3.brush().on("brush end", detail); const innerChart = chart_adj.append('g').attr('class','innerChart'); const cell = innerChart .selectAll("g.cell") .data(data).join("g") .attr("class", "cell") .attr("transform", d => `translate(${[d.x,d.y]})`); cell.append("rect") .attr("height", d => d.h*.95) .attr("width", d => d.w*.95) .attr("rx",d => d.w/4) .attr("ry", d => d.h/4) .style("fill", d => d.value ? color(d.value) : 'white'); chart_adj.append('g').attr('class', 'labels') .selectAll('text.source') .data(data.filter(d => d.x == 0)) .enter() .append("text").attr("class",'source') .attr("y", d => d.y + d.h/2) // using d.y and d.h .attr("x", -15) .text((d,i) => labels[i]); chart_adj.append('g').attr('class', 'labels') .selectAll('text.target') .data(data.filter(d => d.y == 0)) .enter() .append("text").attr("class",'target') .attr("x", d => d.x + d.w/2) // using d.x and d.w .attr("y", -10) .text((d,i) => labels[i]); chart_adj.selectAll("text") .style("font-family", "Arial, sans-serif") .style("text-anchor", "middle") .style("alignment-baseline", "middle"); innerChart.call(brush); // Brush function detail({selection}) { if (selection) { const [[x0, y0], [x1, y1]] = selection; dataFiltered = data.filter(d => x0 <= d.x && d.x < x1 && y0 <= d.y && d.y < y1 || x0 <= (d.x + d.w) && d.x < x1 && y0 <= (d.y + d.h) && d.y < y1); cell.filter(d => !(x0 <= d.x && d.x < x1 && y0 <= d.y && d.y < y1 || x0 <= (d.x + d.w) && d.x < x1 && y0 <= (d.y + d.h) && d.y < y1)).style("opacity", .3); cell.filter(d => x0 <= d.x && d.x < x1 && y0 <= d.y && d.y < y1 || x0 <= (d.x + d.w) && d.x < x1 && y0 <= (d.y + d.h) && d.y < y1).style("opacity", 1); } else { dataFiltered = data; cell.style("opacity", 1); } drawNetwork(dataFiltered); } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } function drawNetwork(data) { // clear svg chart_graph.selectAll('g').remove(); // Transform data const links_temp = data.filter(r => r.source); const nodes_temp = data.map(d => d.source).concat(data.map(d => d.target)).filter((v, i, a) => a.indexOf(v) === i).filter(r => r); let nodes_temp2 = []; for (let i = 0; i < nodes_temp.length; i++) { nodes_temp2.push({node: nodes_temp[i]}); } const networkData = {nodes: nodes_temp2, links: links_temp} const links = networkData.links.map(d => Object.create(d)); const nodes = networkData.nodes.map(d => Object.create(d)); const sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.node).distance(250)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width/4 - margin/2, height/ 2 - margin/2)); const link = chart_graph.append("g") .selectAll("line") .data(links) .join("line") .attr("stroke", d => color(d.value)) .attr("stroke-opacity", 0.5) .attr("stroke-width", d => Math.sqrt(d.value)); const node = chart_graph.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 8) .attr("fill", d3.color("#343434")) .call(drag(sim)); node.append("title") .text(d => d.node); sim.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); } // Return SVG return svg.node(); }