使用d3 SVG Scale而不翻译

2 回答

• 4

  您的 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)") });
  

  回复于 2024-05-08T10:38:48+08:00
• 4

  可在此处找到无需翻译的一般解决方案：Scaling Around a Center Point

  理念：

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

  回复于 2024-05-08T10:38:48+08:00