D3.js將tspan附加到文本元素

我有一個D3條形圖。當我鼠標懸停其中一個小節時，會出現文字。D3.js將tspan附加到文本元素

但我想另一行文字也出現。爲此，我需要附加一個<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); 
}

來源

2017-02-13 Shane G

嘗試以下操作：

要追加：

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", ...);

來源

2017-02-13 23:31:48 javier

我做了這些變化，並更新了問題，以反映這一點。但不幸的是，圖表是一樣的。謝謝 –

在鼠標懸停功能中ts = ...之前的行結尾應該是分號嗎？ –

我在函數附加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

感謝

來源

2017-02-13 23:55:04

D3.js將tspan附加到文本元素

回答

相關問題