使用 Dagre d3 缩放后重新渲染 HTML答案

【问题标题】：Re-render HTML after zoom using Dagre d3使用 Dagre d3 缩放后重新渲染 HTML
【发布时间】：2017-03-04 22:46:18
【问题描述】：

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

【问题讨论】：

“保持健康”是什么意思？

标签： javascript d3.js svg dagre-d3

【解决方案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() 中再次对其进行缩放？

【讨论】：

【解决方案2】：

在我看来问题出在这里：

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

如果您查看代码的顺序，当您定义inner 时，没有<g>。所以，此时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

【讨论】：