Question

我有一个图表，其中有一个元素出现在鼠标悬停上，附加了一个圆圈，文本和一个svg：行，如下所示：

    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（＆＃39; text＆＃39;）函数，每个文本元素一个，目前我无法区分它们）

次要问题;第二个文本元素以完整格式显示时间字符串（例如，Thu Jun 26 2014 08:30:00 GMT-0600（Mountain Standard Time））。我可以动态格式化以获得小时/分钟/秒吗？目前，文本元素从此代码中获取数据：

        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/

Answer 2

我最近有一个类似的问题，当我想要创建4个具有不同属性的矩形时。我用HTML ids和selectAll解决了这个问题。这是一个例子：

var van = road.selectAll('#van').data([5]).enter() 
.append('rect')
.attr('x', function(d) { return 300})
.attr('y', function(d) { return 100})
.attr('width', 30)
.attr('height', 15)
.style('fill', 'brown');

D3中的时间格式： https://github.com/mbostock/d3/wiki/Time-Formatting

附加多个文字＆＃39; d3中的元素

2 个答案: