嗨,我正在尝试使用d3.js构建我的第一个可视化文件,并且我从json来源扩展数据时遇到了一些问题,这就是json:
{
name: 'Jane',
data: [1, 0, 4]
}
这是我缩放比例并创建svg圈子的方式:
var myData = [{
"x": "45.4969717",
"y": "10.605375399999957"
}, {
"x": "45.4847328802866",
"y": "9.236798286437988"
}, {
"x": "45.4838657",
"y": "9.25125330000003"
}]
控制台返回的错误是:
错误:属性cx:预期长度为“ NaN”。
错误:属性cy:预期长度“ NaN”。
我正在使用 d3.js版本5
答案 0 :(得分:2)
域必须是一个数组,所以:
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]);
答案 1 :(得分:1)
不建议使用静态值设置域。这是您要查找的类似示例:
https://bl.ocks.org/mbostock/3887118
使用以下更改:
将宽度,高度,边距定义为变量。
var margin = {top: 10, bottom: 10, left: 10, right: 10},
width = 600-margin.left-margin.right,
height = 400-margin.top-margin.bottom;
返回NaN的线性标度的原因是因为数据值(x&y)是字符串而不是数字。要解析数据,这是一种方法:
// parse data
myData.forEach(function(d) {
d.x = +d.x;
d.y = +d.y;
});
重要提示:设置轴域时,避免使用静态值。利用d3 array manipulations-min,max,extent 。我正在使用d3-extent
var xline = d3.scaleLinear().domain(d3.extent(myData, function(d) { return d.x; })).nice().range([0, width]);
var yline = d3.scaleLinear().domain(d3.extent(myData, function(d) { return d.y; })).nice().range([height, 0]);
现在已经解析了数据(第二步),线性比例尺绘制值不会有问题。
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);
})
出于美学考虑,我使用色标将颜色添加到圆圈中
var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
这是一个代码段:
var myData = [{
"x": "45.4969717",
"y": "10.605375399999957"
}, {
"x": "45.4847328802866",
"y": "9.236798286437988"
}, {
"x": "42.4838657",
"y": "9.25125330000003",
}, {
"x": "40.1053737",
"y": "12"
}, {
"x": "42.4",
"y": "10.4"
}];
var margin = {top: 10, bottom: 10, left: 10, right: 10},
width = 450.57913-margin.left-margin.right,
height = 350-margin.top-margin.bottom;
// parse data
myData.forEach(function(d) {
d.x = +d.x;
d.y = +d.y;
});
var xline = d3.scaleLinear().domain(d3.extent(myData, function(d) { return d.x; })).nice().range([0, width]);
var yline = d3.scaleLinear().domain(d3.extent(myData, function(d) { return d.y; })).nice().range([height, 0]);
var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
var svgViewport = d3.select("#mappa-italia")
.attr('width', width+margin.left+margin.right)
.attr('height', height+margin.top+margin.bottom)
.append("g")
.attr('transform', 'translate('+margin.left+', ' + margin.top+')')
.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").style('fill', function(d, i) {
return colorScale(i);
});
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="mappa-italia"></svg>
希望这会有所帮助。 (顺便说一句,我在数据中添加了两个额外的行)