7

編集 dagre-d3 ライブラリの少し古いバージョン (4.11) を使用する解決策を見つけました。誰かが最新バージョンの問題を見つけることができれば、それも役に立ちます。ありがとうございました

Dagre d3 を使用していくつかのグラフを描画しています。

最初にグラフをレンダリングするとき、私はそうします

g = new dagreD3.graphlib.Graph()
          .setGraph({})
          .setDefaultEdgeLabel(function() { return {}; });
var svg = d3.select("svg"),
            inner = svg.select("g");
            svgGroup = svg.append("g");
var render = new dagreD3.render();

        render(d3.select("svg g"), g);

        var zoom = d3.behavior.zoom().on("zoom", function() {
              inner.attr("transform", "translate(" + d3.event.translate + ")" +
                    "scale(" + d3.event.scale + ")");
              currentZoomScale = d3.event.scale;
              currentPosition = d3.event.translate;

            });
        svg.call(zoom);

次に、ユーザーが特定のノードをクリックすると、そのノードのラベルに HTML を追加したいと考えています。これは、次のようにしてグラフを再レンダリングしない限り表示されません。

g.node(id).label += "<div>" + inputTemplate + "</div>";

var zoom = d3.behavior.zoom()
        .scale(currentZoomScale)
        .on("zoom", function() {
        inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")")
                    });
        svg.call(zoom);

        d3.select("svg").on("dblclick.zoom", null);
        inner.attr("transform", "translate(" + currentPosition + ")" + "scale(" + currentZoomScale + ")");

維持することで、ズームして再レンダリングした後もグラフが適切に維持されるようになるcurrentPositionと思いました。currentZoomScaleしかし、そうではありません。ズームアウトするとすべてのノードが小さくなり、ズームインすると大きくなります。

4

2 に答える 2

1

問題はここにあるように私には思えます：

var svg = d3.select("svg"),
    inner = svg.select("g");
    svgGroup = svg.append("g");

コードの順序を見ると、<g>いつ定義するかはありませんinner。したがって、この時点でinnerはnullです。チャートを再レンダリングすると、グループが存在innerし、選択範囲ではなくなりnullます。

したがって、考えられる解決策は、順序を変更することです。

var svg = d3.select("svg"),
    svgGroup = svg.append("g");//we first append the <g>..    
    inner = svg.select("g");//and only after that we select it
于 2016-10-25T03:29:41.973 に答える
1

問題について明確ではありませんが.scale(currentZoomScale)、2行目に含まれている可能性があります

var zoom = d3.behavior.zoom()
        .scale(currentZoomScale)
        .on("zoom", function() {
        inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")")
                    });
        svg.call(zoom);

        d3.select("svg").on("dblclick.zoom", null);
        inner.attr("transform", "translate(" + currentPosition + ")" + "scale(" + currentZoomScale + ")");

そして、あなたはそれを再びスケーリングしていinnner.attr()ますか？

于 2016-10-24T22:04:13.570 に答える