预渲染 d3 和关键功能

Question

我正在使用 webpack 的 prerender-spa-plugin 来预渲染 d3 代码。当我使用相同的 javascript 代码向客户端提供预呈现的 html 时，有一个地方我使用键函数重新绑定新数据，如下所示：

svg.selectAll("g")
    .data(data, d => d.name) // TypeError: cannot read property name of undefined
    .call(myPlot);

我认为发生这种情况是因为预呈现步骤没有将绑定数据保存到 html DOM 元素，因此第一次连接的重新绑定无法访问 name 字段，因为选择没有绑定数据。

对此有什么好的解决方法？

Answer 1

我现在找到了解决方案，但我会等几天再接受我自己的答案，以防有人有更好的解决方案。

我的解决方案分为两部分：

在数据连接键函数中处理 undefined，以便可以通过回退到索引连接将数据绑定到预呈现的 DOM 元素。
如果使用过渡，请确保进入元素在它们的最终位置被初始化，这样它们就不会从默认值（通常为 0）开始动画。这确保提供的预渲染 HTML 是正确的。

代码如下：

svg.selectAll("g")
    .data(data, d => d ? d.name : undefined) // fall back to an index join given a prerendered DOM without bound data
    .join(enter => enter.append("g").call(myPlot)) // entering elements don't transition
    .transition()
        .call(myPlot);

预渲染 d3 和关键功能

Prerendering d3 and key functions

javascript

prerender

d3.js

webpack