Javascript 如何使用；g"；使用咖啡脚本中的svg在d3中旋转对象？

我正试图创造类似的东西

    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example rect02 - rounded rectangles</desc>

  <!-- Show outline of canvas using 'rect' element -->

  <rect x="100" y="100" width="400" height="200" rx="50"
        fill="green" />

  <g transform="translate(700 210) rotate(-30)">
    <rect x="0" y="0" width="400" height="200" rx="50"
          fill="none" stroke="purple" stroke-width="30" />
  </g>
</svg>

但由于rect2“indigo”有问题，所以无法使用“g”使其旋转，而是得到了类似的结果

咖啡和d3新手，如有任何建议，将不胜感激

---

谢谢。

您似乎在第二个矩形中插入了

元素，而不是vica。因此，

上的变换根本不会影响矩形。您需要首先将

附加到画布上，然后将

附加到该

上：

canvas = d3.select("body")
    .append("svg")
    .attr("width",2600)
    .attr("height",2600)


rect1 = canvas.append("rect")
    .attr("width",400)
    .attr("height",200)
    .attr("x",100)
    .attr("y",100)
    .attr("rx",50)
    .attr("fill","green")


rect2 = canvas.append("rect")
    .attr("width",400)
    .attr("height",200)
    .attr("x",650)
    .attr("y",50)
    .attr("rx",50)
    .attr("fill","none")
    .attr("stroke-width",30)
    .attr("stroke","Indigo")
  .append("g")
    .attr("transform","translate(700 200) rotate(-30)")

// ...

rect2 = canvas.append("g")
    .attr("transform","translate(700 200) rotate(-30)")
  .append("rect")
    .attr("width",400)
    .attr("height",200)
    .attr("x",650)
    .attr("y",50)
    .attr("rx",50)
    .attr("fill","none")
    .attr("stroke-width",30)
    .attr("stroke","Indigo")