通过D3's.attr不在序列化的(serializeToString）字符串中

Multiple classes assigned via D3's .attr are not in the serialized (serializeToString) string

本文关键字：序列化 serializeToString 字符串 D3 attr 通过      更新时间：2023-09-26

尝试序列化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图的过程。除了这个错误，这个过程是有效的。

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

应用第二个类的代码在d3.csv（）中，它是异步的。因此，序列化发生在类更新之前。将序列化代码放在d3.csv（）回调中可以修复此问题。

相关文章：