Question

我在我的项目中创建了基于d3.v2库的强制布局图。它几乎可以在其中运行良好，但有一件事我想改变。因此，当我将节点从图形块中删除之后，我无法触及它。为了解决这个问题，我为我的图形添加了viewBox属性并更改了一些＆＃34; tick＆＃34;事件，所以现在看起来像

HTable table = new HTable(config, "EmployeeDetails");
FilterList list = new FilterList(FilterList.Operator.MUST_PASS_ALL);
    SingleColumnValueFilter filter = new SingleColumnValueFilter(Bytes.toBytes("Employee_details"),
                        Bytes.toBytes("organizationid"), CompareFilter.CompareOp.EQUAL,
                        new BinaryComparator(Bytes.toBytes(String.valueOf("19"))));
list.addFilter(filter);
Scan scan = new Scan();
scan.setFilter(list);
scanner = table.getScanner(scan);

但是，当我拖动节点时，viewBox会发生变化，根据节点数组中的最后一个元素。所以我想知道是否有任何方法可以在拖动任何节点时更改viewBox大小。感谢您的任何答复或建议！

Answer 1

只有 last 节点能够更改viewBox的原因非常简单。我们来检查您的代码。

所有if...else语句都在attr选择node的回调中：

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的{{1}}语句（顺便说一下可以改进）。

这是更新的小提琴：https://jsfiddle.net/fc5myafx/

拖动节点时调整viewBox的大小

1 个答案: