创建面积图：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轴但错误信息保持不变。

Update 1 Fiddle

Answer 1

Understanding the error in the path's d attribute

如果你在路径中创建一个NaN（或者就此而言是一个区域），你必须检查NaN在哪里。例如：

MNaN,NaNL...
  ↑   ↑
  x   y

这表明问题出在x和y方法中。另一方面，当你得到：

MNaN,42L...
  ↑   ↑
  x   y

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

M42,NaNL...
  ↑   ↑
  x   y

...表明问题出在y方法中。根据你更新的JSFiddle，问题来自x方法。

Your problem

问题是你把这样的事情传递到时间尺度：

"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>