javascript - 使用 SVG 从 JSON 文件中绘制节点和链接
问题描述
我是 D3 的新手,无法可视化我的 json 文件。我应该将位置(站点)绘制为半径等于“数量”的圆圈。我对如何使用节点和链接感到非常困惑。我还提供了 JSON 代码的示例。请帮助我了解我的编码哪里出错了
<html>
<head>
<title>D3 Visualisation </title>
<h1> Trading Data </h1>
<style>
.svgCanvas {
border: solid 1px
}
</style>
</head>
<body>
<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script> <script>
window.onload = function(){
var width = 800;
var height = 300;
var thisCanvas = d3.select("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "svgCanvas");
d3.json("data.json", function(d){
console.log(d);
var svgCanvas.selectAll("circle")
.data(d).enter()
.append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.amount; } )
.style("fill", “lightgreen”); })
})
}
</script>
</body>
</html>
Json代码示例如下:
{
"nodes": [
{
"id": "site09",
"x": 317.5,
"y": 282.5
},
{
"id": "site01",
"x": 112,
"y": 47
},
{
"id": "site03",
"x": 69.5,
"y": 287
}
],
"links": [
{"node01": "site05", "node02": "site08", "amount": 10},
{"node01": "site05", "node02": "site02", "amount": 120},
{"node01": "site05", "node02": "site03", "amount": 50}
]
}
解决方案
在这里您可以获得有效的解决方案。只需将数据对象替换为 json。
推荐阅读
- javascript - 我的上下文是在构造函数中定义的,而不是在函数中定义的。无法读取 HTMLCanvasElement.draw 处未定义的属性“beginPath”
- javascript - 生成随机对象
- ios - 我可以在 UISwitch 中设置描述值吗?
- c# - C#:如何找到 2 个可为空的日期时间之间的天数差异?
- angular - IIS7 上的 Angular 7 应用程序中的 500(URL 重写模块错误。)
- regex - XML 正则表达式,用于在输入字符串中排除名为“County”的单词,并且可以接受任何单词/数字/空格
- python - 如何使用 Sympy 自动简化二值有限域上的表达式?
- jquery - 如何通过类名查找元素的父级并添加 CSS?
- swift - 如何隐藏像example.app这样的包文件?
- vbscript - WScript 不适用于 HPALM 工作流程。但是在命令行中执行时工作正常