gpt4 book ai didi

javascript - 使用 Dagre d3 缩放后重新渲染 HTML

转载 作者:数据小太阳 更新时间:2023-10-29 04:49:07 25 4
gpt4 key购买 nike

编辑我找到了一个涉及使用稍旧版本的 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 + ")");

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

最佳答案

我不是很清楚这个问题,但可能是因为你在第二行包含了 .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() 中再次缩放它?

关于javascript - 使用 Dagre d3 缩放后重新渲染 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40196700/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com