Question

...我已将图表从v3移植到v4，而且我已经针对路径和行打了一堵墙。< / p>

这就是我认为的重要部分：

<script src="https://d3js.org/d3.v4.min.js"></script>
pdata = [
        {
            "date": "2018-01-01",
            "marketPrice": 3131
        },
        {
            "date": "2018-01-02",
            "marketPrice": 3151
        }
];  

// loop that transforms "date" to new Date(), marketPrice to numeric 
// *** added during edit ***

// format the data
pdata.forEach(function(d) {
  d.date = new Date (d.date); // difference between this and Ref(3) is...
    // ref(3) calls a time parser rather than instantiate new Date()
  d.marketPrice = +d.marketPrice;
  //console.log("parsing date into: -- Date: " + d.date + " -- Market Price: " + d.marketPrice);
});

// linear scaling functions - xscale() and yscale()
// *** added during edit ***

// Create scales (added in edit)
var xscale = d3.scaleTime()
      .domain([
        d3.min(pdata, function (d){return d.date}), 
        d3.max(pdata, function (d){return d.date})
      ])
      .range([GRAPHLEFT, GRAPHRIGHT]);

var yscale = d3.scaleLinear()
      .domain([
        d3.min(pdata, function (d){return d.marketPrice}), 
        d3.max(pdata, function (d){return d.marketPrice})
      ])
      .range([GRAPHBOTTOM,GRAPHTOP]);

// axis functions omitted ...these work predictably

svg.append("path")
    .data([pdata])
    .attr("stroke", "steelblue")
    .attr("stroke-width", 3)
    .attr("fill", "none")
    .attr("d", lineFunc);

var lineFunc = d3.line()
  .x(function (d) {
    console.log("Graphing x as: " + xscale(d.date)); // updated during edit
    return (xscale(d.date)); // updated during edit ... reveals as NaN
  })
  .y(function (d) {
    console.log("Graphing y as: " + yscale(d.marketPrice)); // updated during edit ... reveals as NaN
    return (yscale(d.marketPrice));
  });

我无法确认来自lineFunc()的回调实际上已被调用。（现在按照下面的答案解决）

在我的页面中，会出现轴，但不会显示绘图线。

我正在使用这些参考资料和模型：

（1） - https://github.com/d3/d3-shape/blob/master/README.md#line

（2） - https://bl.ocks.org/pstuffa/26363646c478b2028d36e7274cedefa6

（3） - https://bl.ocks.org/d3noob/402dd382a51a4f6eea487f9a35566de0

Answer 1

尽管d3.line()是一种方法（即函数），但var lineFunc = d3.line().etc...是一个函数表达式，并且与函数语句不同，它没有被提升：

与函数声明不同，JavaScript中的函数表达式不会被提升。在定义函数表达式之前，不能使用它们。（MDN source）

因此，请将var lineFunc = d3.line().etc...移到顶部，在路径.attr("d", lineFunc)之前：

var lineFunc = d3.line()
    .x(function (d) {
    //etc... 

svg.append("path")
    .data([pdata])
    //etc..
    .attr("d", lineFunc);

PS：你仍然需要线生成器中的比例。您的路径将附加在SVG中，但x值将为时间戳，y值为实际marketPrice值。

Answer 2

... dunno为什么我花了这么长时间才找到答案，但在此过程中我有机会用精细的齿梳梳理D3 API文档和示例。

最终答案实际上是在评论中提供的。

我使用data([pdata])代替datum(pdata)，当我完全更正代码时，问题就解决了。（有一段时间，我有datum([pdata])但由于this fine article中解释的原因而无效。

谢谢Gerardo Fudado - 是的，我买了这件傻傻的T恤。

D3线和路径 - 图形线不显示

2 个答案: