score:2

Accepted answer

Create a <g> child element and scale that instead.

I've added a translate so you can still see the output in the example and I've made all the id values unique.

const svg = d3.select('#example')
                  .append('svg')
                  .attr('width', '100%')
                  .attr('height', '500%')

    const g = svg.append('g')
        .attr('transform', ' translate(500, 100) scale(-1,-1)');
    g.append('rect')
        .attr('id', 'example-1')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '10%')
        .attr('y', '20%')
        .attr('fill','red');

    g.append('rect')
        .attr('id', 'example-2')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '30%')
        .attr('y', '20%')
        .attr('fill','blue');
    g.append('rect')
        .attr('id', 'example-3')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '10%')
        .attr('y', '40%')
        .attr('fill','yellow');
    g.append('rect')
        .attr('id', 'example-4')
        .attr('width', '20%')
        .attr('height', '30%')
        .attr('x', '30%')
        .attr('y', '40%')
        .attr('fill','orange');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="example" style="width:1000px;"></div>    


Related Query

More Query from same tag