javascript - 通过 D3 的 .attr 分配的多个类不在序列化 (serializeToString) 字符串中

Question

当尝试序列化 D3 创建的 SVG 元素时，多个类不会出现在结果字符串中。例如，http://bl.ocks.org/mbostock/4063318有一个位添加了一个类来指示数据点的颜色:

  rect.filter(function(d) { return d in data; })
    .attr("class", function(d) { return "day " + color(data[d]); })

它在浏览器中正确呈现，并且在检查元素时它们看起来像这样:

  <rect class="day q7-11" ...

然而，当我序列化元素时，它们是这样的(即缺少第二类):

  <rect class="day" ...

我通过将以下内容放在上面链接的代码的底部来序列化代码:

  var svg = document.getElementsByTagName("svg")
  var serializer = new XMLSerializer();
  var str = serializer.serializeToString(svg[3]);
  console.log(str);

作为更广泛的上下文，我有一个通过将序列化的 SVG 发送到服务器以转换为图像来批量生成 D3 图形的过程。除了这个错误之外，该过程可以正常工作。

因此，我正在寻找一种方法来序列化第二个类以及第一个类，而不必过多修改我的流程。

Answer 1

应用第二类的代码位于 d3.csv() 内，它是异步的。因此序列化是在类更新之前发生的。将序列化代码放在 d3.csv() 回调中可以解决该问题。