错误：< path>属性d：预期数，“MNaN，NaNLNaN，NaN”。 [英] Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN"

问题描述

我想用D3.js v4创建一个多线图。我正在使用此示例： https://bl.ocks.org/mbostock/3884955 。

I'm tring to create a multi-line chart using D3.js v4. I'm using this example: https://bl.ocks.org/mbostock/3884955.

示例csv数据：

storageSystem,poolId,availableVolumeCapacity,date
system01,0,18031398,20170413
system01,1,15626268,20170413
system01,2,61256286,20170413
system01,3,119514990,20170413
system02,0,15046668,20170413
system02,1,12486558,20170413
system02,2,12303396,20170413
system03,0,35171335,20170413
system03,1,17263722,20170413
system01,0,18031387,20170414
system01,1,15626257,20170414
system01,2,61256275,20170414
system01,3,119514989,20170414
system02,0,15046657,20170414
system02,1,12486547,20170414
system02,2,12303385,20170414
system03,0,35171324,20170414
system03,1,17263711,20170414

数据对象：

0: Object
  color: "#8c564b"
  key: "system03"
  values: Array(2)
    0: Object
      key: "0"
      values: Array(23)
        0: Object
          availableVolumeCapacity: 35171335
          date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)
          poolId: "0"
          storageSystem: "system03"
    1: Object
      key: "1"
      values: Array(23)
        0: Object
          availableVolumeCapacity: 17263722
          date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)
          poolId:"1"
          storageSystem: "system03"

D3.js代码：

var svg = d3.select("svg")
    m = {top: 20, right: 20, bottom: 50, left: 20},
    w = svg.attr("width") - m.left - m.right,
    h = svg.attr("height") - m.top - m.bottom,
    g = svg.append("g").attr("transform", "translate(" + m.left + "," + m.top + ")");

var parseTime = d3.timeParse("%Y%m%d");

var x = d3.scaleTime().range([0, w]),
    y = d3.scaleLinear().range([h, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.availableVolumeCapacity); });

d3.csv("ssystem.csv", function(error, data) {
    if (error) throw error;
    data.forEach(function(d) {
            d.date = parseTime(d.date);
            d.availableVolumeCapacity = +d.availableVolumeCapacity;
});

x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.availableVolumeCapacity; })]);

var dataNest = d3.nest()
    .key(function(d) {return d.storageSystem; })
    .key(function(d) {return d.poolId; })
    .entries(data);

console.log(dataNest)

legendSpace = w/dataNest.length;

dataNest.forEach(function(d,i) {
    svg.append("path")
        .attr("class", "line")
        .style("stroke", function() {
            return d.color = z(d.key); })
        .attr("id", 'tag'+d.key.replace(/\s+/g, ''))
        .attr("d", line(d.values));
    svg.append("text")
        .attr("x", (legendSpace/2)+i*legendSpace)
        .attr("y", h + (m.bottom/2)+ 5)
        .attr("class", "legend")
        .style("fill", function() {
            return d.color = z(d.key); })
        .on("click", function(){
            // Determine if current line is visible
            var active = d.active ? false : true,
            newOpacity = active ? 0 : 1;
            // Hide or show the elements based on the ID
            d3.select("#tag"+d.key.replace(/\s+/g, ''))
                .transition().duration(100)
                .style("opacity", newOpacity);
            // Update whether or not the elements are active
            d.active = active;
            })
        .text(d.key);
});

svg.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + h + ")")
      .call(d3.axisBottom(x));

svg.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Capacity (MB)");
});

我从控制台看到以下错误4次：

I'm seeing the following error 4 times from the console:

Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".
(anonymous) @ d3.v4.min.js:205
ul @ d3.v4.min.js:3768
al @ d3.v4.min.js:3775
(anonymous) @ multi-line.js:51
(anonymous) @ multi-line.js:45
(anonymous) @ d3.v4.min.js:5857
call @ d3.v4.min.js:3622
e @ d3.v4.min.js:5840

非常感谢任何帮助。

推荐答案

问题的根源是值 d 在您的匿名函数中传递给 dataNest.forEach 仍然包含一个级别的嵌套，但您正在使用它，就像它没有任何嵌套一样。您的代码失败，因为它正在查找只有的对象上的 date 和 availableVolumeCapacity 属性key 和 values properties。

The root of your problem is that the value d in your anonymous function passed to dataNest.forEach still contains one level of nesting but you are using it as if it doesn't have any nesting. Your code fails because it is looking for date and availableVolumeCapacity properties on an object that only has key and values properties.

最终有两种方法可以解决这个问题：

There are ultimately two approaches to fix this:

1. 使用结合了存储系统和池ID的单键功能。这会将嵌套减少到只有一个级别：

1. Use a single key function which combines both the storage system and pool ID. This reduces the nesting to only one level:

var dataNest = d3.nest()
    .key(function(d) { return d.storageSystem + " " + d.poolId; })
    .entries(data);

使用两次嵌套调用 forEach ：

dataNest.forEach(function(d2,i2) {
    d2.forEach(function (d,i) {
        svg.append("path")
        // .... rest of inner function omitted
    });
});

您需要完成 d （特别是 d.key ）和内部函数中的 i （为简洁省略了我的主体）看你是否需要合并 d2 和 i2 。例如，您可能希望使用 d2.key ++ d.key 而不是 d.key 。

You will need to go through all uses of d (in particular d.key) and i within the inner function (whose body I omitted for brevity) to see whether you need to incorporate d2 and i2. For example, perhaps you want to use d2.key + " " + d.key instead of d.key.

这篇关于错误：< path>属性d：预期数，“MNaN，NaNLNaN，NaN”。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！