1

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!

Godson Dabre
  • 13
  • 2

1 Answers1

0

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)')
Mark McClure
  • 4,862
  • 21
  • 34
  • Hello Mark Thank you for your response. I actually need the transform amatrix = [1, 0 , 0, -1, 0, 500]; is there a way to revert the transform only on Text & a not on polygon , i mean without affecting polygon position – Godson Dabre Nov 23 '22 at 18:14
  • Yes, you can set the transform attribute of the `text` and `polygon` elements individually using the exact same syntax. Just delete the `g` element and append the the `text` and `polygon` elements directly to the `svg`. – Mark McClure Nov 23 '22 at 23:49