d3 中的 Line() 生成 NaN

Question

一周前开始使用 D3 和 JS。我正在尝试绘制多系列折线图，但我一直在试图找出 line() 返回 NaN 的原因。x 域是离散字符串值 ["70","71","72".."80"]。使用 d3 v4。我尝试调整 XY 比例、范围值等。试图识别断裂点，结果是线（）。var XScale = d3.scaleBand(); var YScale = d3.scaleLinear();          XScale.domain(findata.map(d=>d.values.year)).range([0,width]);` \"findata" 是我导入数据后的 JS 对象。YScale.domain([       d3.min(getmaxscale),        //I separately calculate the min-max       d3.max(getmaxscale)]).range([height,0]);  lineGenerator      .x(function(d){return XScale(d.model) })      .y(function(d){return YScale(d.avg)});这是我试图检查输出的内容：var a= findata.map(d=>d.value);console.log(lineGenerator([a[0].model,a[0].avg]));\testing 给定的行。输出（不正确）：MNaN,NaNLNaN,NaN//-------------样本数据：[  {    "Car": "AMC Ambassador Brougham",    "MPG": "13",    "Displacement": "360",    "Horsepower": "175",    "Weight": "3821",    "Model": "73",    "Origin": "US"  },  {    "Car": "AMC Ambassador DPL",    "MPG": "15",    "Displacement": "390",    "Horsepower": "190",    "Weight": "3850",    "Model": "70",    "Origin": "US"  },  {    "Car": "AMC Ambassador SST",    "MPG": "17",    "Displacement": "304",    "Horsepower": "150",    "Weight": "3672",    "Model": "72",    "Origin": "US"  },  {    "Car": "AMC Concord",    "MPG": "19.4",    "Displacement": "232",    "Horsepower": "90",    "Weight": "3210",    "Model": "78",    "Origin": "US"  },  {    "Car": "AMC Concord",    "MPG": "24.3",    "Displacement": "151",    "Horsepower": "90",    "Weight": "3003",    "Model": "80",    "Origin": "US"  },  {    "Car": "AMC Concord d/l",    "MPG": "18.1",    "Displacement": "258",    "Horsepower": "120",    "Weight": "3410",    "Model": "78",    "Origin": "US"  },  {    "Car": "AMC Concord DL",    "MPG": "23",    "Displacement": "151",    "Horsepower": "0",    "Weight": "3035",    "Model": "82",    "Origin": "US"  },  {    "Car": "AMC Concord DL 6",    "MPG": "20.2",    "Displacement": "232",    "Horsepower": "90",    "Weight": "3265",    "Model": "79",    "Origin": "US"  }]

Answer 1

我无法完全测试您的代码，但我认为问题如下：

您将线生成器定义为：

lineGenerator

  .x(function(d){return XScale(d.model) })

  .y(function(d){return YScale(d.avg)});

然后你这样称呼它：

lineGenerator([a[0].model,a[0].avg])

因此，当您调用 lineGenerator 时，您正在传递modeland avg，然后，行生成器尝试再次访问model和访问avg，因此将调用更改为：

lineGenerator([a[0],a[0]])

可能会解决问题

看到示例后编辑

当您这样做时，attr("d", function(d) { return lineGenerator(d.value); })您正在以这种方式传递数据：

{

  avg: (7) [15, 17, 13, 18.75, NaN, 24.3, NaN],

  model: (7) [70, 72, 73, 78, 79, 80, 82]

}

线生成器以这种方式期望数据：

[

    {avg: 15, model: 70},

    {avg: 17, model: 72},

    {avg: 13, model: 73},

    {avg: 18.75, model: 78},

    {avg: NaN, model: 79},

    {avg: 24.3, model: 80},

    {avg: NaN, model: 82},

]

就在该ccountry.append("path")行之前，我执行了以下操作并更改了数据格式（这只是一个示例，我将更改您用来以正确方式格式化它们的函数）：

var lineData = [];

for(var k = 0; k<a[0].avg.length; k++) {

    lineData.push({

        avg: a[0].avg[k],

        model: a[0].model[k]

    });

}

console.log(lineGenerator(lineData));

最后console.log返回了这个：

d3-line.html:208 M0,370.3539823008849L20.952380952380953,357.07964601769913C41.904761904761905,343.80530973451323,83.80952380952381,317.2566371681416,125.71428571428571,330.5309734513274C167.61904761904762,343.80530973451323,209.52380952380952,396.9026548672566,251.42857142857142,385.28761061946904C293.3333333333333,373.6725663716814,335.23809523809524,297.34513274336285,377.1428571428571,NaNC419.04761904761904,NaN,460.9523809523809,NaN,502.85714285714283,NaNC544.7619047619047,NaN,586.6666666666666,NaN,628.5714285714286,NaNC670.4761904761905,NaN,712.3809523809523,NaN,733.3333333333334,NaNL754.2857142857142,NaN

最后，你可以看到，有一些楠的一些avg属性，我取而代之的是一个随机数，取代了线.attr("d", function(d) { return lineGenerator(d.value); })用.attr("d", function(d) { return lineGenerator(lineData); })，然后我们得到了一条线：