javascript - 创建面积图 : path with 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

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

当你在由一条线(或一个区域)创建的路径中得到一个 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>