Search code examples
svgcoordinatecartesian-coordinates

D3 group translate not working

I am using the following code to "convert" the SVG coordinate system to a normal Cartesian one:

      .append("svg")
            .attr("width", this._width)
            .attr("height", this._height)
            .append("g")
            .attr("id", "canvas")
            .attr("transform", "translate(0,500)")
            .attr("transform","scale(1,-1)");

For some reason the .attr("transform", "translate(0,500)") (where 500 is the height of the svg) is not producing any result in my group. Output in browser:

<g id="canvas" transform="scale(1,-1)"></g>

Any help is appreciated.Thank you in advance.

Solution

  • I imagine the two transform attributes overwrite, you should just append the contents together e.g.

    .attr("transform", "translate(0,500) scale(1,-1)");