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);

作为更广泛的背景，我有一个批处理生成D3图表的过程，通过将序列化的SVG发送到服务器以转换为图像。除了这个错误之外，这个过程是有效的。

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

Answer 1

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

通过D3的.attr分配的多个类不在序列化（serializeToString）字符串中

1 个答案: