function annotationLegend(container) { const titlePadding = 10; // padding between title and entries const entrySpacing = 18; // spacing between legend entries const entryRadius = 8; // radius of legend entry marks const labelOffset = 6; // additional horizontal offset of text labels const baselineOffset = 4; // text baseline offset, depends on radius and font size // Working code but not responsive text const entries = container .selectAll('g') .data(annotations, d => d) .join('g') .attr( 'transform', d => `translate(0, ${titlePadding + d.index * entrySpacing})` ); const symbols = entries .append('circle') .attr('cx', entryRadius) // <-- offset symbol x-position by radius .attr('r', entryRadius) .attr('fill', 'none') .attr('stroke', '#ebbd22') .attr('stroke-width', 1); const noteText = container .selectAll("text") .data(annotations) .enter() .append("text") .attr( 'transform', d => `translate(${entryRadius}, ${titlePadding + d.index * entrySpacing + baselineOffset})` ) .text(d => d.index) .style("text-anchor", "middle") .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style("font-size", "10px") .style('fill', '#05032d'); const labels = entries .append('text') .attr('x', 2 * entryRadius + labelOffset) // <-- place labels to the right of symbols .attr('y', baselineOffset) // <-- adjust label y-position for proper alignment //.attr("width", 150) .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style("font-size", "12px") .style('fill', '#05032d') .style('user-select', 'none') // <-- disallow selectable text .text(d => `${d.label} (${formatDateShort(d.date)})`); //.html('' + annotations[2].label +', ' +formatDateShort(annotations[7].date) + '') /* const mytext = entries .append("foreignObject") .attr("width", widthNow - margin.right) .attr("height", height) .attr('x', 2 * entryRadius + labelOffset) // <-- place labels to the right of symbols .attr('y', baselineOffset) // <-- adjust label y-position for proper alignment .append("xhtml:span") .attr("class", "span") .html( '' + annotations[2].label + ', ' + formatDateShort(annotations[2].date) + '' ); */ const title = container .append('text') .attr('x', 0) .attr('y', 0) .attr( "style", "font-size: 13px; font-family: sans-serif,Helvetica,Arial; font-weight: bold; color: #05032d;" ) .text('Massnahmen'); }