javascript - 在 d3 中追加多个 'text' 元素

Question

我有一个图表，其中有一个元素出现在鼠标悬停时，附有一个圆圈、文本和一个 svg:line，如下所示:

    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);*/

我想添加第二个文本元素(当前被注释掉的那个)但是当我尝试这样做时它不会呈现第一个文本元素。有没有办法将多个相同类型的元素附加到一个组中？我还需要能够独立地选择它们(如下所示，我有两个 focus.select('text') 函数，一个用于每个文本元素，目前我无法区分它们)。

次要问题；第二个文本元素以完整格式显示时间字符串(例如 Thu Jun 26 2014 08:30:00 GMT-0600(山区标准时间))。我可以即时格式化它以获得小时/分钟/秒吗？目前文本元素从这段代码中获取数据:

        focus.select("text")
            .text(d.temperature)
            .attr("font-family", "NorWester")
            .attr("font-size", 11);
        focus.select("text")
            .text(d.time)
            .attr("y", function() { return (height - y(d.temperature)) })
            .attr("font-family", "NorWester")
            .attr("font-size", 11);

Answer 1

焦点是什么 SVG 元素？我认为必须是 g 才能处理多个 text 元素。

对于格式化，d3 有一个简洁的功能:

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

编辑:工作 jsfiddle 演示，显示组内的两个文本元素: jsfiddle.net/PRvGC/