D3.js错误:<path>属性d:预期数字,“…247088246067331LNaN,NaNZ”

时间:2019-03-01 14:44:29

标签: javascript d3.js

我遇到标题中列出的预期数字“ ....”错误。函数drawChart()由另一个仅读取和解析数据的脚本调用。我正在尝试绘制极地面积图。

y2

我已经看到很多帖子都出现这种错误,但是我似乎仍然无法理解这里的问题。我遵循的许多教程都以完全相同的方式绘制图表。谢谢!

编辑- 这是我数据的2个元素(总共12个元素)-

    function drawChart(data){
    //Define important parameters...
    var width = 500,
        height= 500,
        radiusScale = d3.scaleLinear(),
        angleScale = d3.scaleLinear().range([Math.PI, 3 * Math.PI]),
        color = d3.scaleOrdinal().range(['#A60F2B', '#648C85', '#B3F2C9', '#528C18', '#C3F25C']);

    var maxVal = d3.max(data, function(d){
        return d3.max([d.disease, d.wounds, d.other]);
    });
    var maxRadius = Math.sqrt(maxVal * 12 / Math.PI);
    radiusScale.domain([0, maxRadius]);

    var canvas = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .attr('class', 'canvas')

    var graph = canvas.append('svg:g')  //SVG group for the chart
        .attr('class', 'graph')
        .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')');

    var arcCreator = d3.arc()
        .innerRadius(0)
        .outerRadius(function(d){ 
            console.log("RADIUS - " + d.radius);
            return radiusScale(d.radius); })
        .startAngle(function(d){ 
            console.log("START ANGLE - " + d.startAngle);
            return angleScale(d.startAngle); })

    //Everything works great until here. Radius and startAngle values
    //generated correctly but the above listed error occurs at 
    //('d', arcCreator) where the actual drawing occurs.
    //I can also see relevant data entered with sector class. 
    var sectors = graph.selectAll('.sector')
        .data(data)
        .enter()
        .append('svg:path')
        .attr('class', 'sector')
        .attr('d', arcCreator)
        .attr('fill', function(d, i){
            return color(d.label)
        });
    }

这是我从控制台日志获得的AFTER SCALING之后的前2个元素的半径和startAngle。

[
{
    "date": "1/1855", 
    "army_size": 32393, 
    "disease": 2761, 
    "wounds": 83, 
    "other": 324 
},
{
    "date": "2/1855", 
    "army_size": 30919, 
    "disease": 2120, 
    "wounds": 42, 
    "other": 361 
}

0 个答案:

没有答案