Jupyter Notebook 中的 d3 svg 路径 attr d 分配失败

Question

在 d3 中进行有向图可视化时，我遵循了 Martin Graham's jsfiddle example here to create bezier arcs for multiple links between two nodes. This worked a treat and I'm grateful for his guidance. The current state of development of my working example can be seen here。 d3 代码就在 <script> 标签中的 HTML 中。生成这些弧的函数如下所示：

  function linkArc(d,i,lnks) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y;
    var qx = dy /  6 * d.linknum,
        qy = -dx / 6 * d.linknum;
    var qx1 = (d.source.x + (dx / 2)) + qx,
        qy1 = (d.source.y + (dy / 2)) + qy;

    return `M${d.source.x} ${d.source.y}
            C${d.source.x} ${d.source.y}, ${qx1} ${qy1}, ${d.target.x} ${d.target.y}`;
  };

它是从 drawGraph 函数中调用的，如下所示：

simulation.on("tick", () => {
    link.attr("d", linkArc);
    ...etc...

很好，这很有效。但我的目标是在 Jupyter Notebook 的上下文中部署此可视化，并且在该上下文中，当 d3 尝试呈现这些链接时，我在每个 tick() 上收到 javascript 错误说 Error: <path> attribute d: Expected number, "MNaN NaN\n …".

linkArc() 做 return 一个字符串，但我希望有人更了解 Jupyter and/or d3 的方式可以向我解释为什么该字符串在一种情况下有效，但是不是另一个。

有什么想法吗？

Answer 1

这个谜题的解法实在是尴尬到无法复述，但万一有人稍微有点好奇，我终于意识到节点的x和y坐标并没有被计算出来，因为它们依赖于width 和 height 的 svg 元素，这些变量是在 drawGraph 函数之外声明的，我未经修改地移动到笔记本通过 [=13 导入的 javascript 模块中=].

这部分是由于我完全不熟悉 require.js 的工作原理，而且错误消息只告诉我疏忽的结果而不是原因。让这成为我的一个教训：变量有范围。 javascript 模块的全部意义的一部分是控制和限制范围。

Jupyter Notebook 中的 d3 svg 路径 attr d 分配失败

d3 svg path attr d assignment fails in Jupyter Notebook

javascript

svg

directed-graph

d3.js

jupyter-notebook