使用Dagre d3进行缩放后重新渲染HTML

Question

编辑 我找到了一个解决方案,涉及使用较旧版本的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我可以确保图形在缩放和重新渲染后保持良好状态.但这种情况并非如此.如果我缩小,我的所有节点都会变小,如果我放大则会变大.

Answer 1

我对这个问题不太清楚，但这可能是因为你已经包含.scale(currentZoomScale)在第二行中

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()?中再次缩放它