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>

创建面积图：NaN路径

1 个答案:

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

您的问题