transformSVG = (positions, transform1, transform2) => { const margin = {left: 30, top: 15} const el = html` ` // helpers 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 }