Line thickness of border of transformed rectangle

[jeremy9959]

I’m drawing a group of rectangles by applying a transform computed from the data to move a “standard” rectangle into the position I want it. So the general picture is:

svg.append("g").selectAll("rect")
.data(positions)
.enter()
.append('rect')
(code to set x,y, width, height of standard rectangle)
.attr('transform', d=>..function that computes a matrix(a,b,c,d,e,f))...

I’d like to draw a border on these rectangles by adding an .attr('stroke','black')
but because the matrix transformation isn’t orthogonal the result is that the thickness of the border varies depending on the data. Is there a way to draw the border after the transformation so the thickness is in the native coordinate system?

Here’s the notebook I’m working on:

Half Planes

[j-f1]

You could calculate the amount of scaling then set the stroke-width to the inverse of that.

[mootari]

You can achieve this by setting non-scaling-stroke:

    .append('rect')
    .attr('vector-effect', 'non-scaling-stroke')

[severo]

[jeremy9959]

@mootari

.append('rect')
    .attr('vector-effect', 'non-scaling-stroke')

Perfect!