我正在尝试使用 d3.js 构建我的第一个可视化效果,但在缩放来自 JSON 源 (myData
) 的数据时遇到了一些问题。这就是我缩放它并创建 svg 圆圈的方式:
var myData = [{
"x": "45.4969717",
"y": "10.605375399999957"
}, {
"x": "45.4847328802866",
"y": "9.236798286437988"
}, {
"x": "45.4838657",
"y": "9.25125330000003"
}]
var xline = d3.scaleLinear().domain(45.103300, 40.1053737).range([0, 450.57913]);
var yline = d3.scaleLinear().domain(12.186311, 12.605783).range([0, 350]);
var svgViewport = d3.select("#mappa-italia").append("g").attr("id", "locations");
var circleElements = svgViewport.selectAll("circle").data(myData).enter().append("circle").attr("cx", function(d) {
return xline(d.x);
}).attr("cy", function(d) {
return yline(d.y);
}).attr("r", "5");
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="mappa-italia"></svg>
控制台返回的错误是:
Error: <circle> attribute cx: Expected length, "NaN".
Error: <circle> attribute cy: Expected length, "NaN".
我正在使用 d3.js 版本 5
最佳答案
域需要是一个数组,所以:
var xline = d3.scaleLinear().domain([45.103300,40.1053737]).range([0,450.57913]);
var yline = d3.scaleLinear().domain([12.186311,12.605783]).range([0,350]);
关于javascript - d3.js 线性比例返回 NaN,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51077874/