作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在我的项目中基于 d3.v2 库创建了力布局图。它在几乎所有部分都运行良好,但有一件事我想改变。因此,当我之后将节点拖出图形 block 时,我无法到达它。为了解决这个问题,我为我的图形添加了 viewBox 属性并更改了小的“滴答”事件,所以现在它看起来像
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node.attr("transform", function(d) {
if (d.fixed != true) {
return "translate(" + d.x + "," + d.y + ")";
} else {
return "translate(" + d.px + "," + d.py + ")";
}
// here is what I tried to do
if (d.x < 960 && d.y < 600) {
vis.attr("viewBox", "0 0 960 600");
} else if (d.x > 960 && d.y < 600) {
vis.attr("viewBox", "0 0 " + d.x + " 600");
} else if (d.x < 960 && d.y > 600) {
vis.attr("viewBox", "0 0 960 " + d.y);
} else {
vis.attr("viewBox", "0 0 " + d.x + " " + d.y)
}
});
});
但是 viewBox 只有在我拖动节点时才会改变,这取决于节点数组中的最后一个元素。所以我想知道在拖动任何节点时是否有任何方法可以更改 viewBox 的大小。感谢您的任何回答或建议!
最佳答案
只有last 节点能够改变viewBox
的原因很简单。让我们检查一下您的代码。
所有的 if...else
语句都在 node
选择的 attr
的回调中:
node.attr("transform", function (d) {
因此,将针对选择中的每个 节点评估数据 (d
)。所以,如果将节点 B
拖到图表的边框,即使它的值大于 300
,节点 C
的值>(小于 300
),在评估时,将覆盖它并将 viewBox 设置回 "0 0 300 200"
。
解决方案:
让我们计算每个节点的最大值值:
var maxX = d3.max(node.data().map(d => d.x));
var maxY = d3.max(node.data().map(d => d.y));
然后,您可以使用 if...else
语句(顺便说一句,可以改进)处理 maxX
和 maxY
.
这是更新后的 fiddle :https://jsfiddle.net/fc5myafx/
关于javascript - 拖动节点时调整 viewBox 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49379858/
我是一名优秀的程序员,十分优秀!