javascript - 如何在 CoffeeScript 中使用 "g"和 svg 来旋转 d3 中的对象？

Question

我正在尝试创建类似于

的东西

    <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>

得到类似于下面的这张图片

下面是这个coffeescript

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“indigo”有问题，无法使用“g”旋转它，而是得到类似这样的东西。

coffee 和 d3 的新手，如有任何建议，我们将不胜感激。

谢谢。

Answer 1

您似乎插入了 <g>元素进入第二个矩形而不是反之亦然。因此对 <g> 的转换根本不影响矩形。您需要先附加 <g>到 Canvas ，然后附加 <rect>那个<g> :

// ...

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")