Estoy tratando de personalizar un gráfico D3 y tengo algunos problemas.

Quiero agregar un círculo que navegue por el gráfico y muestre información sobre herramientas con datos, pero ninguno de los métodos que probé hasta ahora funcionó. Intenté agregar un círculo y una información sobre herramientas en mi código, pero no aparecen. Esto es exactamente lo que estoy tratando de lograr, pero en mi propio código, simplemente no funciona: https://bl.ocks.org/alandunning/cfb7dcd7951826b9eacd54f0647f48d3

Creo que este fragmento de código es el problema en mi caso y no sé cómo cambiarlo o qué hacer al respecto:

 var focus = svg.append("g") .attr("class", "focus") .style("display", "none"); focus.append("circle") .attr("r", 4.5); var rect = focus.append("rect") .attr("x", 9) .attr("dy", ".35em") .attr("fill", "yellow"); var text = focus.append("text") var text = rect.append("text") .attr("x", 10) .attr("y", 10);

Aquí hay un violín de mi código: https://jsfiddle.net/3Lje1f4w/