xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
const margin = {top: 25, bottom: 25, left: 250, right: 25};
const width = 960 - margin.right - margin.left;
const height = 800 - margin.top - margin.bottom;
const svg = d3.select('body').append('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr("id", "adjacencyG")
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var PromiseWrapper = d => new Promise(resolve => d3.csv(d, p => resolve(p)));
Promise
.all([
PromiseWrapper("nodelist.csv"),
PromiseWrapper("edgelist.csv")
])
.then(resolve => {
createAdjacencyMatrix(resolve[0], resolve[1]);
});
function createAdjacencyMatrix(nodes, edges) {
var edgeHash = {};
edges.forEach(edge => {
var id = `${edge.source}-${edge.target}`;
edgeHash[id] = edge;
});
var matrix = [];
nodes.forEach((source, a) => {
nodes.forEach((target, b) => {
var grid = {
id: `${source.id}-${target.id}`,
x: b,
y: a,
weight: 0
};
if (edgeHash[grid.id]) {
grid.weight = edgeHash[grid.id].weight;
}
matrix.push(grid);
});
});
d3.select("svg")
.append("g")
.attr("transform", "translate(50,50)")
.attr("id", "adjacencyG")
.selectAll("rect")
.data(matrix)
.enter()
.append("rect")
.attr("class", "grid")
.attr("width", 25)
.attr("height", 25)
.attr("x", d => d.x * 30)
.attr("y", d => d.y * 30)
.style("fill-opacity", d => d.weight * .2);
d3.select("svg")
.append("g")
.attr("transform", "translate(50,45)")
.selectAll("text")
.data(nodes)
.enter()
.append("text")
.attr("x", (d,i) => i * 30 + 12.5)
.text(d => d.id)
.style("text-anchor", "middle");
d3.select("svg")
.append("g")
.attr("transform", "translate(45,50)")
.selectAll("text")
.data(nodes)
.enter()
.append("text")
.attr("y", (d,i) => i * 30 + 12.5)
.text(d => d.id)
.style("text-anchor", "end");
d3.selectAll("rect.grid").on("mouseover", gridOver);
function gridOver(d) {
d3.selectAll("rect")
.style("stroke-width", function (p) {
return p.x == d.x || p.y == d.y ? "3px" : "1px";
});
}
}
</script>
</body>
https://d3js.org/d3.v4.min.js