Question

我有一个图表可视化我通过缩放保存所有内容的<g>来添加缩放这也会调整节点（圆圈）及其标签的大小。

从我看到的情况来看，保持大小并且仅重新定位like this：

function zoomed() {
    var t = d3.event.transform;
    circle.attr("transform", function(d) {
        return "translate(" + t.applyX(d[0]) + "," + t.applyY(d[1]) + ")";
    });
}

然而，这对我不起作用，因为我已经使用translate来d3.forceSimulation()定位节点。我可以像上面那样应用缩放，但是当模拟再次开始时，这一切都会回落 - 例如拖动节点时，使用：

完成

function dragstarted() {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    ...

如何组合模拟和缩放？

我想的一种方法是通过反比例缩小所有节点缩放到缩放比例。
其他方式可能是塑造事物 - 较小的字体，较小的圆圈等。
其他方式可能是篡改力量，因此节点在放大时会相互进一步。

Answer 1

现在我为每个节点采用了反向比例的方式。工作得很好，虽然我认为这有点开销。

以下是代码：

// Zooming
var zoom = d3.zoom();
zoom.scaleExtent([0.4, 3]);
zoom.on("zoom", function onZoomed() {
    console.log("Zooming", d3.event);
    var t = d3.event.transform;
    zoomingGroup.attr("transform", t); // Using transform.toString()
    svg.selectAll(".myGroup circle").attr("transform", "scale(" + 1/t.k + ")");
    svg.selectAll(".myGroup .labelBox").attr("transform", "scale(" + 1/t.k + ")");
    svg.selectAll(".myGroup .labelText").attr("transform", "scale(" + 1/t.k + ")");
});

我想将其应用于整个<g class=".myGroup">，但将其transform更改为可扩展会干扰forceSimulation()的{{1}}。你能给我一个小费处理吗？我可以添加另一个translate并将<g>应用于父translate(...)和<g>到另一个。

如果某人有更好（更简单）的解决方案，我会不加考虑。

D3.js - 在保持大小的同时缩放，使用d3.forceSimulation（）

1 个答案: