Question

我在d3 v4中实现了一个后插插值图。时间保存为格式为＆＃34; hh：mm：ss.ss＆＃34;的字符串。我通过将时间字符串转换为秒来传递timeScale一个整数范围。尽管如此，我还是收到了错误：属性d：预期的数字，＆＃34; MNaN，NaNLNaN，NaNL ......＆＃34;。＆＃34;

＆＃13;

function render(data) {
  const margin = {top: 20, right: 20, bottom: 30, left: 50};
  width -= margin.left + margin.right;
  height -= margin.top + margin.bottom;

  const bboList = data.bboList;
  bboList.push( bboList[bboList.length - 1] );

  const timeStrToDate = (timeStr) => {
    var time = timeStr.split(':');
    let d = new Date();
    d.setHours  (+time[0]);
    d.setMinutes( time[1]);
    d.setSeconds( time[2]);
    return d;
  }

  bboList.forEach(function(bbo) {
    bbo.time = timeStringToSeconds(bbo.timeStr);
    bbo.ask = +bbo.ask;
    bbo.bid = +bbo.bid;
  });

  function timeStringToSeconds(timeString){
    const hms = timeString.split(':');
    return (+hms[0]) * 60 * 60 + (+hms[1]) * 60 + (+hms[2]);
  }

  const minTime = timeStringToSeconds(bboList[0].timeStr);
  const maxTime = timeStringToSeconds(bboList[bboList.length - 1].timeStr);


  let xScale = d3.scaleLinear()
    .domain(d3.extent(data, function(bbo) { return bbo.time; }))
    .range([minTime, maxTime]);

  const yExtent = d3.extent(data, function(bbo) { return bbo.bid; });

  let yScale = d3.scaleLinear()
    .domain(yExtent)
    .range([height, 0]);

  const xAxis = d3.axisBottom().scale(xScale);

  const yAxis = d3.axisLeft().scale(yScale);


  chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  chart.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Price ($)");


  const line = d3.line()
    .x(function(bbo) {
      return xScale(bbo.time);
     })
    .y(function(bbo) {
       return yScale(bbo.bid);
     });

  chart.append("path")
    .attr("class", "line")
    .attr("d", line(bboList));

}

＆＃13;

当我使用调试器跟踪代码时，似乎在每一步我都返回数字或由数字组成的bbo对象。我相信问题出在我的xScale上，但我不确定我到底在寻找什么。任何关于如何调试此代码或为d3 v4找到一个好资源的指导都将非常感激（.line的文档对我来说不清楚）

谢谢。

Answer 1

问题出现在您拨打d3.extent。

的问题上

您似乎希望将bboList传递给他们，而不是data。 d3.extent为其第一个参数采用数组，而data似乎是某个描述的对象。

缩放函数xScale和yScale除了将输入域中的值转换为输出范围中的值之外，不做任何其他操作。因此，调试代码的一种方法是尝试使用某些值调用这些缩放函数，并使用例如console.log(xScale(12345));来查看它们的结果。我尝试与他们一起玩，发现NaN值来自他们。

d3 v4 scaleTime不接受日期对象也不接受整数

1 个答案: