# Line thickness of border of transformed rectangle

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:

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

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

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

1 Like

Perfect!