Question

修改我找到了一个解决方案，涉及使用较旧版本的dagre-d3库（4.11）。如果有人能够找到最新版本的问题，那也会有所帮助。谢谢

我正在使用Dagre d3绘制一些图表。

当我最初渲染我的图表时，我会

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 + ")");

然后，当用户点击某个节点时，我想将HTML附加到该节点的标签上。除非我重新渲染图形，否则这不会显示，我将对此进行以下操作：

currentPosition

我认为通过维护currentZoomScale和{{1}}，我可以确保图表在缩放和重新渲染后保持良好状态。但这种情况并非如此。如果我缩小，我的所有节点都会变小;如果我放大，我的节点会变大。

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()？

中再次缩放它

Answer 2

在我看来，问题出在这里：

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

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

2 个答案: