D3.js - 在保持大小的同时缩放，使用 d3.forceSimulation()答案

【问题标题】：D3.js - Zooming while keeping sizes, with d3.forceSimulation()D3.js - 在保持大小的同时缩放，使用 d3.forceSimulation()
【发布时间】：2017-01-31 16:04:23
【问题描述】：

我有一个图表可视化。
我通过缩放包含所有内容的<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();
    ...

如何将模拟和缩放结合起来？

我正在考虑的一种方法是按比例缩小所有节点以用于缩放。
其他方式可能是设置样式 - 更小的字体、更小的圆圈等。
其他方式可能是篡改力，使节点在放大时彼此远离。

【问题讨论】：

标签： javascript d3.js zooming simulation

【解决方案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() 的 translate。你能给我一个提示来处理它吗？我可以添加另一个<g> 并将translate(...) 应用到父<g> 和scale(...) 到另一个。

如果有人有更好（更简单）的解决方案，我不接受这个。

【讨论】：