Text Flip issue with D3.js , when transform attribute used

Question

I am new to D3.js. I added simple polygon & than text, but it's showing text as Flipped text.This is because i have used 'Transform attribute' i guess.

Is there anyway, i keep the existing transform attribute & correct the Text flip issue? Output should be 'Hello' instead it displays output Logic

jsfiddle

`var amatrix = [1, 0, 0, -1, 0, 500];
var svg = d3.select('body').append('svg')
    .attr('height', 500)
    .attr('width', 700);
var grp =   svg.append("g")
                  .attr("transform", "matrix(" + amatrix + ")");

grp.append('polygon')
                .attr('points', "50,50 150,50 150,150 50,150")
                .attr('stroke', '#f00')
                .attr('fill', 'none');
                
    grp.append("text")
                .attr("font-size", 20)
                .attr("x", 100)
                .attr("y", 50)
              .attr("dy", "1.1em") 
                .style("text-anchor", "start")
                .attr("id", 'txtid')
                .text('Hello'); `  

Thanks in Advance!

Answer 1

In the definition of your tranform, you have

var amatrix = [1, 0 , 0, -1, 0, 500];

It's really that -1 that's causing the flip. You could change that to

var amatrix = [1, 0, 0, 1, 0, 200];

Alternatively, there are simpler ways to specify the transform that don't require the use of linear algebra. Thus, you might try the following for your grp definition:

var grp = svg.append("g")
    .attr('transform', 'translate(0,200)')