创建一个区域图表：带有NaN的路径

Question

我正在学习D3，并尝试从url中重新创建示例。

我遇到了这个错误。

Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…"

属性d是指每一个数据。但为什么它显示为MNaN？

如果解决方案提供者能够解释如何进行调试，我将不胜感激。

data = [
    {
      "date": "2007-04-23",
      "close": 93.24
    },
    {
      "date": "2007-04-24",
      "close": 95.35
    }];
    //Update 1
    data = data.map((item) => ({date:item.date, value:item.close}))
            data.y = "$ Close";
    //Update 1     

   height = 500;
width = 500;
margin = ({ top: 20, right: 20, bottom: 30, left: 30 });
x = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([margin.left, width - margin.right])
y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]).nice()
    .range([height - margin.bottom, margin.top])
xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
yAxis = g => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y))
    .call(g => g.select(".domain").remove())
    .call(g => g.select(".tick:last-of-type text").clone()
        .attr("x", 3)
        .attr("text-anchor", "start")
        .attr("font-weight", "bold")
        .text(data.y))
area = d3.area()
    .x(d => x(d.date))
    .y0(y(0))
    .y1(d => y(d.value))
const svg = d3.select('svg')
    .attr('width', width)
    .attr('height', height)

svg.append("path")
    .datum(data)
    .attr("fill", "steelblue")
    .attr("d", area);

svg.append("g")
    .call(xAxis);

svg.append("g")
    .call(yAxis);

这里是JSFIDDLE。

更新1

我需要有日期和值以及y轴...但我只有日期和收盘价...已经在jsfiddle中更新了代码。 现在我已经得到了x轴和y轴，但错误信息仍然存在。

更新1 Fiddle

- Alaksandar Jesus Gene

Answer 1

理解路径的d属性中的错误

当您在由线条（或区域等）创建的路径中获得NaN时，您必须检查NaN所在的位置。例如：

最初的回答

如果您在使用线条（或区域）创建路径时遇到NaN，请检查NaN的位置。

MNaN,NaNL...
  ↑   ↑
  x   y

这表明问题出现在x和y方法中。另一方面，当您得到以下内容时： "最初的回答"

MNaN,42L...
  ↑   ↑
  x   y

问题出在x方法中，而不是...

M42,NaNL...
  ↑   ↑
  x   y

...显示问题出现在y方法中。根据您更新的JSFiddle，问题来自x方法。

问题所在

问题在于您将以下内容传递给时间轴：

"2007-04-24"

这不是一个日期，而只是一个字符串。你需要解析日期。例如，给定你的字符串格式： "这不是一个日期，这只是一个字符串。您需要解析日期。例如，给定您的字符串格式："

data.forEach(function(d){
    d.date = d3.timeParse("%Y-%m-%d")(d.date);
});

这是带有更改的代码：

最初的回答：

data = [{
    "date": "2007-04-23",
    "close": 93.24
  },
  {
    "date": "2007-04-24",
    "close": 95.35
  }
];

data.forEach(function(d) {
  d.date = d3.timeParse("%Y-%m-%d")(d.date);
  d.value = d.close;
})

height = 500;
width = 500;
margin = ({
  top: 20,
  right: 20,
  bottom: 30,
  left: 30
});
x = d3.scaleTime()
  .domain(d3.extent(data, d => d.date))
  .range([margin.left, width - margin.right])
y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)]).nice()
  .range([height - margin.bottom, margin.top])
xAxis = g => g
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
yAxis = g => g
  .attr("transform", `translate(${margin.left},0)`)
  .call(d3.axisLeft(y))
  .call(g => g.select(".domain").remove())
  .call(g => g.select(".tick:last-of-type text").clone()
    .attr("x", 3)
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text(data.y))
area = d3.area()
  .x(d => x(d.date))
  .y0(y(0))
  .y1(d => y(d.value))
const svg = d3.select('svg')
  .attr('width', width)
  .attr('height', height)

svg.append("path")
  .datum(data)
  .attr("fill", "steelblue")
  .attr("d", area);

svg.append("g")
  .call(xAxis);

svg.append("g")
  .call(yAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

- Gerardo Furtado