Get G transform

by Michael Rovinsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<svg width="1000" height="1000" >
</svg>

CSS

svg {
  border: 1px solid black;
}

JavaScript

var svg = d3.select("svg");

svg.call(d3.zoom().on("zoom", function (event) {
                svg.attr("transform", event.transform)
            }))
            .append("g")

        var linkContainer = svg.append("g").attr("class", "linkContainer")
        var nodeContainer = svg.append("g").attr("class", "nodeContainer")

        var data = {
            "nodes": [
                { "id": "A" },
                { "id": "B" },
                { "id": "C" },
                { "id": "D" }
            ],
            "links": [
                { "source": "B", "target": "A" },
                { "source": "C", "target": "A" },
                { "source": "D", "target": "A" }
            ]
        }

        var force = d3.forceSimulation()
            .force("link", d3.forceLink().id(function (d) {
                return d.id;
            }).distance(200))
            .force("charge", d3.forceManyBody().strength(-650))
            .force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2))
            .force("collision", d3.forceCollide().radius(50))

        var links = linkContainer.selectAll(".link")
            .data(data.links)
            .join("line")
            .attr("class", "link")
            .style("stroke", "black")
            .style("opacity", 0.2)

        var nodes = nodeContainer.selectAll(".node")
            .data(data.nodes, function (d) { return d.id; })
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("id", function (d) { return d.id; })
            .on("click", getPosition)
            .call(d3.drag()
                .on("start", dragStarted)
                .on("drag", dragged)
                .on("end", dragEnded)
            )

        nodes
            .append("circle")
            .attr("r", 40);

        force
            .nodes(data.nodes)
            .on("tick", tick)

        force
            .force("link")
            .links(data.links)




        function...