D3.js - Масштабирование при сохранении размеров, с d3.forceSimulation()

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]) + ")"; 
    }); 
} 

Однако это не будет работать для меня, потому что я уже использую перевод для размещения узлов на 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() «s translate. Можете ли вы дать мне совет, чтобы справиться с этим? Я мог бы добавить еще <g> и применить translate(...) к родителям <g> и scale(...) к другому.

Я оставляю это неприемлемым, если у кого-то есть лучшее (более простое) решение.