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&nbsp; .x(function(d){return XScale(d.model) })&nbsp; .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); })您正在以这种方式传递数据：{&nbsp; avg: (7) [15, 17, 13, 18.75, NaN, 24.3, NaN],&nbsp; model: (7) [70, 72, 73, 78, 79, 80, 82]}线生成器以这种方式期望数据：[&nbsp; &nbsp; {avg: 15, model: 70},&nbsp; &nbsp; {avg: 17, model: 72},&nbsp; &nbsp; {avg: 13, model: 73},&nbsp; &nbsp; {avg: 18.75, model: 78},&nbsp; &nbsp; {avg: NaN, model: 79},&nbsp; &nbsp; {avg: 24.3, model: 80},&nbsp; &nbsp; {avg: NaN, model: 82},]就在该ccountry.append("path")行之前，我执行了以下操作并更改了数据格式（这只是一个示例，我将更改您用来以正确方式格式化它们的函数）：var lineData = [];for(var k = 0; k<a[0].avg.length; k++) {&nbsp; &nbsp; lineData.push({&nbsp; &nbsp; &nbsp; &nbsp; avg: a[0].avg[k],&nbsp; &nbsp; &nbsp; &nbsp; model: a[0].model[k]&nbsp; &nbsp; });}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); })，然后我们得到了一条线：