使用Dagre d3缩放后重呈现HTML
使用Dagre d3缩放后重呈现HTML
提问于 2016-10-22 20:24:54
Edit I已经找到了一个解决方案，涉及使用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，我可以确保图形在缩放和重呈现后保持良好。但事实并非如此。如果缩小，我的所有节点都会变小，如果放大，则会变得更大。
回答 2
Stack Overflow用户
发布于 2016-10-24 22:04:13
我对这个问题并不十分清楚，但可能是因为您在第二行中包含了.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()中缩放它
Stack Overflow用户
发布于 2016-10-25 03:29:41
在我看来，问题就在这里：
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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40196700
复制相关文章
相似问题
腾讯云开发者
