D3.jsはテキスト要素にtspanを追加します

Question

私はD3棒グラフを持っています。バーの1つをマウスで動かすと、テキストが表示されます。

しかし、別の行のテキストも表示したいと思います。このために私は<tspan>要素を追加する必要があります。

私は例を見ましたが、<tspan>をテキスト要素に追加することはできません。

グラフはhere、フルコードはgithubです。

'テキスト' は追加されると 'tspanの' がそれに追加され、

g.selectAll(".bar") 
     .data(data) 
     .enter().append("rect") 
     .style("fill", function(d) { 
      return colorScale(d.intensity); 
     }) 
     .attr("class", "bar") 
     .attr("x", function(d) { 
      return x(d.date); 
     }) 
     .attr("y", function(d) { 
      return y(d.distance); 
     }) 
     // .attr("width", x.bandwidth()) 
     .attr("width", function(d) { 
      return dur(d.duration); 
     }) 
     // .attr("width", 6) 
     .attr("height", function(d) { 
      return height - y(d.distance); 
     }) 
     .on("mouseover", handleMouseOver) 
     .on("mouseout", handleMouseOut); 

    t = g.append('text') 
     .attr('x', 9) 
     .attr('dy', '.35em'); 

    ts = g.append('tspan') 
     .attr('x', 9) 
     .attr('dy', '.35em'); 

JS関数handleMouseOver

function handleMouseOver(d) { 
    d3.select(this) 
     .style("fill", "lightBlue") 
    g.select('text') 
     .attr("x", x(d.date) + dur(d.duration + 5)) 
     .attr("y", y(d.distance) + 10) 
     .text(d.distance + "m"); 
    ts.text("blah") 
     .attr("x", x(d.date) + dur(d.duration + 5)) 
     .attr("y", y(d.distance) + 30); 
} 

Answer 1

は、以下のことを試してみてください。

追加するには：

t = g.append('text') 
     .attr('x', 9) 
     .attr('dy', '.35em'); 

ts = g.append('tspan') 
     .attr('x', 9) 
     .attr('dy', '.35em'); 

その後、hanldeMouseOver上：

ts.text("blah") 
    .attr("x", ...) 
    .attr("y", ...); 

Answer 2

私は、関数では、tspan追加することによって、それを得た、

function handleMouseOver(d) { 
    d3.select(this) 
     .style("fill", "lightBlue") 
    g.select('text') 
     .attr("x", x(d.date) + dur(d.duration + 5)) 
     .attr("y", y(d.distance) + 10) 
     .text(d.distance + "m") 
     .append('tspan') 
     .text(d.number) 
     .attr("x", x(d.date) + dur(d.duration + 5)) 
     .attr("y", y(d.distance) + 30) 
     .append('tspan') 
     .text(d.date) 
     .attr("x", x(d.date) + dur(d.duration + 5)) 
     .attr("y", y(d.distance) + 50); 
} 

何tspanの他の場所ではありません。

の作業例here

おかげ