3

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" ...

しかし、要素をシリアル化すると、次のようになります (つまり、2 番目のクラスがありません)。

  <rect class="day" ...

上記にリンクされているコードの下部に以下を配置して、コードをシリアル化しています。

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

より広い文脈として、シリアル化された SVG をサーバーに送信して画像に変換することにより、バッチで D3 グラフを生成するプロセスがあります。このプロセスは、この 1 つのバグを除いて機能します。

したがって、プロセスをあまり変更せずに、この 2 番目のクラスと最初のクラスをシリアル化する方法を探しています。

4

1 に答える 1

0

2 番目のクラスを適用するコードは、非同期の d3.csv() 内にあります。そのため、シリアル化はクラスの更新前に発生しています。d3.csv() コールバック内にシリアル化コードを配置すると、問題が修正されます。

于 2013-08-15T17:54:33.647 に答える