javascript - D3 试图将 SVG 的属性设置为 NaN，我不明白为什么

Question

我正在尝试制作一些基本的 d3 图表，我在这方面有一点经验。这是我正在使用的 JSON 示例(我有 100 个对象，为简洁起见，保留了大部分对象):

var data = [
            {
               "OrderID": 1,
               "ShipCountry": "USA",
               "Freight": 168.0,
               "Version": 2
           },
           {
               "OrderID": 2,
               "ShipCountry": "USA",
               "Freight": 336.0,
               "Version": 2
           },
           {
               "OrderID": 3,
               "ShipCountry": "USA",
               "Freight": 504.0,
               "Version": 2
           }]

这是我的 d3 代码:

 var margin = { top: 10, bottom: 30, left: 30, right: 20 };

var width = 700 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
//svg for chart with margins
var svg = d3.select('#chart-wrapper')
                .append('svg')
                    .attr('height', height + margin.top + margin.bottom)
                    .attr('width', width + margin.left + margin.right)
                .append('g')
                    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

//xScale will be based on orderID attribute
var xScale = d3.scale.linear().domain([0, 99]).range([0, width]);
var yScale = d3.scale.linear().domain([16632, 0]).range(height, 0);




svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
        .attr('cx', function (d) {
            return xScale(d.Freight)
        })
        .attr('cy', function (d) {
            return yScale(d.OrderID);
        })
        .attr('r', 2)
        .attr('fill', 'green');

出于某种原因，每个圆的 cy 属性都设置为 NaN，这显然会阻止它渲染。我已经切换了 Freight 和 OrderID 字段，但仍然只有 cy 属性没有正确设置。在调试时，我记录了每个值，它们看起来是实数。 (这也发生在尝试创建折线图时 - 我路径的“d”属性的第二个数字是 NaN，这是我决定尝试使用散点图的时候)

知道发生了什么事吗？谢谢

Answer 1

您需要将 .range() 的参数设为一个数组。

var yScale = d3.scale.linear().domain([16632, 0]).range(height, 0);

现在

var yScale = d3.scale.linear().domain([16632, 0]).range([height, 0]);