transformSVG = (positions, transform1, transform2) => {
const margin = {left: 30, top: 15}
const el = html`
<svg width=${textWidth + margin.left} height=${textWidth / 2 + margin.top}>
<g transform='translate(${margin.left}, ${margin.top})'>
<g>
<rect width=100 height=100 x=${positions.x} y=${positions.y} />
<g class='x axis' />
<g class='y axis' />
</g>
<g id='transform1' opacity=0.75 transform='${transform1}'>
<rect width=100 height=100 x=${positions.x} y=${positions.y} fill=${pathColors[1]} />
<g class='x axis' />
<g class='y axis' />
</g>
${transform2 ?
`<g id='transform2' opacity=0.75 transform='${transform2}'>
<rect width=100 height=100 x=${positions.x} y=${positions.y} fill=${pathColors[2]} />
<g class='x axis' />
<g class='y axis' />
</g>` : ''
}
</g>
</svg>
`
const xAxis = d3.axisTop()
.scale(d3.scaleLinear().domain([0, textWidth]).range([0, textWidth]))
.tickSizeInner(-textWidth / 2)
.tickSizeOuter(0)
.ticks(4)
const yAxis = d3.axisLeft()
.scale(d3.scaleLinear().domain([0, textWidth / 2]).range([0, textWidth / 2]))
.tickSizeInner(-textWidth)
.tickSizeOuter(0)
.ticks(4)
// rendering
const svg = d3.select(el)
svg.selectAll('.x.axis').call(xAxis)
svg.selectAll('.y.axis').call(yAxis)
svg.selectAll('.axis').selectAll('line')
.attr('stroke-dasharray', '5 2')
.attr('opacity', 0.5)
svg.selectAll('.axis').selectAll('text')
.style('font-size', '1.2em')
// translated elements
svg.select('#transform1').selectAll('line, path')
.attr('stroke', pathColors[1]).attr('stroke-width', 2)
svg.select('#transform1').selectAll('text')
.attr('fill', pathColors[1])
.style('font-weight', 'bold')
if (transform2) {
svg.select('#transform2').selectAll('line, path')
.attr('stroke', pathColors[2]).attr('stroke-width', 2)
svg.select('#transform2').selectAll('text')
.attr('fill', pathColors[2])
.style('font-weight', 'bold')
}
return el
}