Transform / Translate is not working

I can’t get the transform translate to work in the example below. All the petals are in the same place. It doesn’t look as if the code inside the single quotes is being recognised.

It’s part of Shirley Wu’s (@sxywu )Intro to D3 and I’ve coded it as per Shirley’s example which appears to work.

The full code is here

and the specific code snippet here.

{
const svg = html<svg width=${width} height=${svgHeight}></svg>

// YOUR CODE HERE :sparkles:
d3.select(svg)
.selectAll(‘path’)
.data(movies)
.enter().append(‘path’)
.attr(‘transform’, (d,i) => ‘translate(${calculateGridPos(i)})’)
.attr(‘d’, d => pathObj[d.rated])
.attr(‘fill’, d=> colorObj[d.genres[0]] || colorObj.Other)
.attr(‘stroke’, d=> colorObj[d.genres[0]] || colorObj.Other)
.attr(‘fill-opacity’, 0.1)
.attr(‘stroke-width’, 4)

return scrollSVG(svg)
}

You are using the wrong quote marks. Shirley is using template literals here so need ` not ’

.attr('transform', (d,i) => `translate(${calculateGridPos(i)})`)

Thank you

1 Like