Append multiple 'text' elements in d3

Question

I have a graph with an element which appears on mouseover, to which there is attached a circle, text and an svg:line as follows: ``` var focus = svg.append("g") .attr("class", "focus") .style("display", "none") var circleRadius = 4.5; focus.append("circle") .attr("r", circleRadius); focus.append("text") .attr("y", -9) .attr("x", 0) .style("text-anchor", "middle"); focus.append("svg:line") .attr("x1", 0).attr("x2", 0) // vertical line so same value on each .attr("y1", circleRadius).attr("y2", 200); // top to bottom /*focus.append("text") .attr("y", -2) .attr("x", -20);*/ ``` I want to add a second text element (the one currently commented out) but when I try to do that it won't render the first text element. Is there a way to append multiple elements of the same type to a group? Also I need to be able to select them independently (as shown below, I have two focus.select('text') functions, one for each text element, and currently I can't distinguish them). Secondary question; the second…

Accepted Answer

What SVG element is focus? I think it must be a `g` to work with multiple `text` elements.

For the formatting, d3 has a neat function:

```
var format = d3.time.format('%H:%M');
// ...
focus.select('text').text(function(d) {return format(d.time);});
```

Edit: Working jsfiddle demo, showing two texts elements inside a group: jsfiddle.net/PRvGC/

Append multiple 'text' elements in d3

Solution

Problem