javascript - How to use "g" with svg in coffee script to rotate object in d3 ? -

I'm trying to make something similar

  & lt; Svg width = "12cm" height = "4 cm" view box = "0 1200 400" xmlns = "http://www.w3.org/2000/svg" version = "1.1" & gt; & Lt; Desc & gt; Example rect02 - rounded rectangle & lt; / Desc> & Lt ;! - Show canvas outline using the 'rect' element - & gt; & Lt; Rect x = "100" y = "100" width = "400" height = "200" rx = "50" fill = "green" /> & Lt; G conversion = "translation (700 210) rotate (-30)" & gt; & Lt; Rect x = "0" y = "0" width = "400" height = "200" Rx = "50" fill = "none" stroke = "purple" stroke-width = "30" /> & lt; / G> & Lt; / Svg & gt;   

P>

  canvas = d 3.select ("body") .append ("svg") .attr ("width", 2600) .attr ("height" ("height", 200) .attr ( "X", 100) .attr ("y", 100)). ("Width", 400). RTAR ("width", 400). .attr ("rx", 50) .attr ("fill", "green") rect2 = canvas.append ("rect") .attr ("width", 400) .attr ("height", 200) .attr .attr ("fill", "none") .attr ("stroke width", 30) .attr ("x", 650) .attr ("y", 50) .attr ("rx", 50) Stroke "," indigo ") .append (" g ") .attr (" conversion "," translation (700 200) rotate (-30) ")  

But the problem is" Rect2 "Indigo "It could not be found to rotate using" G "and instead got something like this.

In coffee and D3 New,

Thanks

You & lt; G & gt; element in the other rectangle and not vica versa thus & lt; G & gt; To add you need to first and then & lt; Rect & gt; to that and gt :

  // ... rect2 = canvas.append ("g") .attr ("transform" , "Translation (700 200) rotate (-30)") .append ("rect" .attr ("y", 50) .attr ("rx", 50) .attr ("width", 400) .attr ( "Height", 200) .attr ("x", 650). ("Stroke", "indigo")  

.attr ("stroke-width", 30)