[英]How to plot coordinate points in d3?
I have a JSON file with a number of coordinates, like so:我有一个带有多个坐标的 JSON 文件,如下所示:
[
{
"coord": [
184.5247050,
775.2556777
]
},
{
"coord": [
177.4747474,
833.2566478
]
},
{
"coord": [
255.6434553,
446.7733333
]
}
]
I use this code with the d3
library, to try to plot the data on a canvas:我将此代码与
d3
库一起使用,以尝试 plot canvas 上的数据:
var svg = d3.select("#canvas");
d3.json(location_data, function(data){
svg.selectAll("circle")
.data(data.coord)
.enter()
.append("circle")
.attr("cx", function(element, index){
return index;
})
.attr("cy", function(element, index){
return index;
})
.attr("r", 30)
.attr("fill", "lightgreen");
})
But I do not see any output. What is wrong with the code?但是我没有看到任何 output。代码有什么问题? How do I fix it?
我如何解决它?
The problem is that you bind the data using .data(data.coord)
, but data is an array and has no coord attribute.问题是您使用
.data(data.coord)
绑定数据,但数据是一个数组并且没有坐标属性。 You have to transform your object array to an array containing arrays of coordinates like so:您必须将 object 数组转换为包含 arrays 坐标的数组,如下所示:
.data(data.map(d => d.coord))
You probably also need to change the way you set "cx" and "cy" attributes:您可能还需要更改设置“cx”和“cy”属性的方式:
.attr("cx", d => d[0])
.attr("cy", d => d[1])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.