9

この方法でsvg（サーバーから静的コンテンツとして提供される）をインポートしています

d3.xml("http://localhost:3000/mysvg.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    var mySvg = d3.select("#somediv").node().appendChild(importedNode);

次に、すべての svg パスを反復処理して、それらを使用して何かを実行しようとしています

    d3.selectAll("#somediv svg path").each(function(d, i) {
        console.log(this, d, i);
    });
}

私が得ているのはこの問題です

  • iは 1 からパスの数です。これは正しいです。

  • dundefined正しい SVG パス要素ではありません。

  • thisこのようなsvgパス要素です

    <path id="m021" fill="#00AAFF" d="M225.438,312.609c-0.665-1.084-1.062-1.691-2.368-1.963c-0.582-0.121-1.686-0.271-2.265-0.069 c-0.507,0.174-0.637,0.649-1.431,0.368c-0.934-0.33-0.665-1.272-0.71-2.104c-0.597-0.021-1.18,0-1.733,0.262 ...etc" ></path>

私dは本当の SVG パスであると思っていましたが、そうでないのはなぜですか?

編集：

私がやりたいことについての少しの洞察が役立つかもしれません。

私の町の地区ごとに 1 つのパスを持つ svg があります。各パスの中心にいくつかの円グラフを作成したいと思います。現在、データはありません。円グラフに使用されます。パス上でマウスオーバー機能を作成し、各パスに小さな赤い円 (将来のステップで円グラフになります) を追加したいと考えています。

これを行う最善の方法は何ですか？

4

2 に答える 2

7

元の要求を単純化して、各地区の中心に円を追加するとします。地区が比較的正方形であると仮定しましょう。パスの代わりに地理データがある場合、これははるかに簡単になることに注意してください。

var svg = d3.select("#somediv svg");
var districts = svg.selectAll("path");

var district_centers = districts[0].map(function(d, i) {
    var bbox = this.getBBox();
    return [bbox.left + bbox.width/2, bbox.top + bbox.height/2];
});

svg
  .selectAll("circle")
  .data(district_centers)
  .enter()
  .append("circle")
     .attr("class", "district_circle")
     .attr("cx", function(d){ return d[0]})
     .attr("cy", function(d){ return d[1]})
     .attr("r", 10)
     .attr("fill", "red");
于 2013-03-07T18:08:55.657 に答える
3

selection.each の API doc によると、 d はデータである必要があります。これは、以前に .data() を呼び出してデータをノードにバインドしていない場合はありません。あなたが持っているのは、データがバインドされていない純粋な SVG だけです。

パスには ID があることに気付きました。これらの ID に一致するデータセットがある場合は、おそらく.data 関数のキー パラメータを使用してそれにバインドできます。

于 2013-03-07T18:04:01.160 に答える