使用 d3 SVG 比例而不进行翻译

Using d3 SVG Scale without translate

本文关键字：翻译 d3 SVG 使用      更新时间：2023-09-26

我正在尝试在SVG和d3中使用scale（）转换。 我知道它通过增加坐标比例来工作，但它似乎也在平移我的对象。 当我有一个位于 （100,100） 的矩形并且我做一个 scale（2） 时，矩形的大小加倍并移动到 （0,0）。 如何让它在缩放时停止从 （100,100） 移动到 （0,0）。 以下是我的代码：

    var mysvg = d3.select("#viz")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .attr("class","mylist");  
    var node = mysvg.selectAll("g.node")
        .data(mydata)
        .enter().append("g")
        .attr("class","node")
        .attr("transform", function(d) { return "translate(" + d.xpos + "," + d.ypos + ")"; });         
    node.append("rect")
        .attr("width",tileWidth)
        .attr("height",tileWidth)
        .attr("fill","orange")
        .attr("rx",10)
        .attr("ry",10);
    node.append("text")
        .attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileWidth/2 +")" })
        .attr("text-anchor", "middle")
        .attr("dy", ".3em")
        .attr("font-family","serif")
        .text(function(d) { return d.symbol; });
    node.on("mouseover",function(){ d3.select(this).transition().attr("transform","scale(1.2)") });
    node.on("mouseout",function(){ d3.select(this).transition().attr("transform","scale(1)") });

无需翻译即可扩展的通用解决方案可在此处找到：围绕中心点缩放

想法：

translate(-centerX*(factor-1), -centerY*(factor-1))
scale(factor)

您的mouseover和mouseout事件将覆盖原始translate(" + d.xpos + "," + d.ypos + ")。

我认为解决此问题的最

简单方法是添加一个父g并对其进行翻译，例如......

var mysvg = d3.select("#viz")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .attr("class","mylist");  
    var parent = mysvg.selectAll("g.parent")
        .data(mydata)
        .enter().append("g")
        .attr("class","parent")
        .attr("transform", function(d) { return "translate(" + d.xpos + "," + d.ypos + ")"; });      
    var node = mysvg.selectAll("g.parent")
        .enter().append("g")
        .attr("class","node")
     });         
    node.append("rect")
        .attr("width",tileWidth)
        .attr("height",tileWidth)
        .attr("fill","orange")
        .attr("rx",10)
        .attr("ry",10);
    node.append("text")
        .attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileWidth/2 +")" })
        .attr("text-anchor", "middle")
        .attr("dy", ".3em")
        .attr("font-family","serif")
        .text(function(d) { return d.symbol; });
    node.on("mouseover",function(){ d3.select(this).transition().attr("transform","scale(1.2)") });
    node.on("mouseout",function(){ d3.select(this).transition().attr("transform","scale(1)") });
相关文章：