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

Posted 2023-02-22

【中文标题】D3 线和路径 - 图形线不显示

【英文标题】：D3 Line and Path - graph line doesn't show

【发布时间】：2018-09-11 07:24:38

【问题描述】：

...我正在将图表从 v3 移植到 v4，但我在 path 和 line 方面遇到了障碍。

这是我认为的突出部分：

<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

【问题讨论】：

首先，与 console.log 问题无关，您缺少行生成器中的刻度。例如，对于 x 位置，您不能使用像 "2018-01-02" 这样的字符串！另外，请使用datum(pdata) 而不是data([pdata])。

在这种情况下，缩放出现在后台。有一个 forEach 循环（隐含在 cmets 中）通过对每个日期元素进行“new Date()”替换来转换日期字符串。 （我已将其添加为对 OP 的编辑）——我找不到关于 datum([pdata]) 和 data(pdata) 之间区别的文档——我在 API 文档中查找错误的位置，示例似乎有点矛盾的。

...另外，我有一个后台函数 xscale() -- 你是否断言在lineFunc() 我的代码应该.x(d => return xscale(d.date)) 而不是.x(d => return d.date) -- 因为我也有试过了。

我确实找到了对 datum(pdata) 和 data(pdata) 之间差异的清晰考虑......*** node here 和 article here

【参考方案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 值。

【讨论】：

移动声明产生了影响。谢谢。这实际上是我应该在某个地方学到的基本原则。正如你所看到的，我在这种语言上是横着走的。同时，我盯着我的缩放函数并交叉检查上面参考文献 (3) 中的模型，让我眼花缭乱。我将添加我的缩放功能作为对 OP 的编辑 - 也许有一些我看不到的东西会脱颖而出。

OP 新增缩放功能。 （元：将其添加为伪答案以使其在对话中更加突出并保持节点的完整性会更有效吗？我认为只是将该业务作为一个新问题发布，但似乎更有益于在这里彻底解决。）

好的，尝试添加答案表明正确的方法是编辑 OP。 （元：就个人而言，当我来到一个节点时，我发现更令人困惑，阅读以找到我自己问题的答案。这意味着当我阅读 OP 时，cmets 和答案并不反映原始问题。但是好吧.. .)

【参考方案2】：

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

最终答案实际上是在上面的 cmets 中提供的。

我使用的是data([pdata]) 而不是datum(pdata)，当我完全更正代码后，问题就解决了。 （有一段时间，我有datum([pdata])，但由于this fine article 中解释的原因，这并没有成功。

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