0
376
VisualizaçõesD3.JS - svg shown in github editor, but not in Visual Studio Code - why?
As a D3 beginner, I am currently making a tutorial, using the Github editor. So far everything works. However, when I use the code one to one in my IDE, the black circles are not displayed? How can this be??
index.html
<!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.0">
<link rel="stylesheet" href="css/styles.css">
<title>Document</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<p>This is just a test</p>
<svg id="container" width="960" height="500" ></svg>
</body>
</html>
**index.js++
import {select, forceSimulation, forceManyBody, forceLink, forceCenter} from "d3";
const nodes = [
{"id": "Alice"},
{"id": "Bob"},
{"id": "Carol"}
];
const svg = select("#container");
const width = +svg.attr("width");
const height = +svg.attr("height");
const centerX = width / 2;
const centerY = height / 2;
const links = [
{"source": 0, "target": 1}, // Alice → Bob
{"source": 1, "target": 2} // Bob → Carol
];
const simulation = forceSimulation(nodes)
.force("charge", forceManyBody())
.force("link", forceLink(links))
.force("center", forceCenter(centerX, centerY));
const circles = svg.selectAll("circle").data(nodes).enter().append("circle").attr("r", 30);
simulation.on("tick", () => {
circles.attr("cx", d=>d.x)
circles.attr("cy", d=>d.y)
});
·
Juan Pablo Isaza
Responde à pergunta