1

http://bl.ocks.org/mbostock/4063570 をガイドとして使用して、D3 のクラスター機能を試しています 。

私が見た他のすべての D3 SVG の例と同様に、例をよくコピーすると、SVG 要素が D3 によって作成されます。

問題を引き起こしている私が行った変更は、複数の D3 グラフィックスを静的 HTML で定義されたレイアウトに挿入する目的で行われました。

D3 を使用して、HTML で既に定義されている SVG タグに要素を追加してみると、結果はほぼ同じですが、必ずしも十分に近いとは限りません。

作成された DOM 要素を調べると、違いは明らかです。

正しく動作するコードには次のコードが含まれます。

var svgGraphic = d3.select("body").append("svg")
    .attr("width", totalWidth)
    .attr("height", totalHeight)
    .append("g").attr("transform", "translate(80,0)");

これ (およびここには示されていない数行) により、次のような階層の DOM 要素が生成されます。

<svg width="600" height="200">
    <g transform="translate(80,0)">
        <path class="link" d="M0,100C95,100 95,50 190,50">
        <path class="link" d="M0,100C95,100 95,150 190,150">
        <g class="node" transform="translate(0,100)">
        <g class="node" transform="translate(190,50)">
        <g class="node" transform="translate(380,25)">
    </g>
</svg>

コードがより似ている場合：

var svgGraphic = d3.select("#graphic");
svgGraphic.append("g").attr("transform", "translate(80,0)");

path 要素と node 要素は、最初の "g" タグ内にネストされていません。

<svg id="graphic" height="200" width="600">
    <g transform="translate(80,0)">
    <path class="link" d="M0,100C95,100 95,50 190,50">
    <path class="link" d="M0,100C95,100 95,150 190,150">
    <g class="node" transform="translate(0,100)">
    <g class="node" transform="translate(190,50)">
    <g class="node" transform="translate(380,25)">
</svg>

明らかに、終了 g タグを追加しようとはしていませんが、最初の例ではどのようにしてそこに到達するのでしょうか?

4

1 に答える 1

2

最初のケースでは：

var svgGraphic = d3.select("body").append("svg")
    .attr("width", totalWidth)
    .attr("height", totalHeight)
    .append("g").attr("transform", "translate(80,0)");

svgGraphicg最後の行に追加した要素への参照を保持します。

2番目の場合：

var svgGraphic = d3.select("#graphic");
svgGraphic.append("g").attr("transform", "translate(80,0)");

svgGraphicsvgで選択した要素を参照しますd3.select("#graphic")。

したがって、に要素を追加すると、最初のケースの要素と2番目のケースの要素に要素svgGraphicが追加されます。gsvg

私はあなたが望むと信じています：

var svgGraphic = d3.select("#graphic")
    .append("g").attr("transform", "translate(80,0)");
于 2013-02-18T19:38:15.867 に答える