在鏈接上的鼠標懸停上顯示文本

我試圖在鏈接上顯示mouseover上的文本，但我無法看到任何文本。我只能改變下面代碼中的顏色。在鏈接上的鼠標懸停上顯示文本

任何與工具提示的幫助也是受歡迎的，因爲我也嘗試過。

Here is the code to the jsfiddle。

來源

2015-10-07 Priya Ahuja

http://jsfiddle.net/pria_3/70qy8ps6/6/參考代碼 –

link.on（「鼠標懸停」，函數（）{d3.select（本）。 style（「stroke」，「red」）。text（「hello」）;}）; –

您應該在問題中包含對代碼的引用。 – colidyre

嘗試這種方式。

link.on('mouseover', function(d, i) { 
    d3.select(this).style("stroke", "red"); 
    if (!d3.select("#link-label-" + i).node()) { 
     svg.append("text") 
      .attr("id", "link-label-" + i) 
      .attr("font-family", "Arial, Helvetica, sans-serif") 
      .attr("x", function() { 
       if (d.target.x > d.source.x) { 
        return (d.source.x + (d.target.x - d.source.x)/2); 
       } else { 
        return (d.target.x + (d.source.x - d.target.x)/2); 
       } 
      }) 
      .attr("y", function() { 
       if (d.target.y > d.source.y) { 
        return (d.source.y + (d.target.y - d.source.y)/2); 
       } else { 
        return (d.target.y + (d.source.y - d.target.y)/2); 
       } 
      }) 
      .attr("fill", "Black") 
      .style("font", "normal 12px Arial") 
      .attr("dy", ".35em") 
      .text(function() { 
       return d.source.name + " - " + d.target.name; 
      }); 
    } 
}).on('mouseout', function(d, i) { 
    d3.select(this).style("stroke", d.target.group == 2?"black":"#9ecae1"); 
    d3.select("#link-label-" + i).remove(); 
});

更新fiddle

來源

2015-10-07 10:16:35 Gilsha

非常感謝。它工作正常。但是如果我在文本函數中傳遞d，它會給我一個錯誤，說明目標未定義。 –

.text（function（d）{ var value = d.target.data.split（「」）; var result = parseInt（value [0]）; //我想在鼠標懸停上顯示這個結果 –

It Worked ..我得到了錯誤，我不應該通過兩次，當我們已經通過鼠標懸停功能... :) –

由於您的circle s的已綁定到數據，你可以做這樣的事情

d3.select('circle') 
    .attr('title', function(d){ 
     return d.name; //or whatever 
    });

的使用默認的瀏覽器工具提示

來源

2015-10-07 10:14:28 fra9001

可能的重複否我想在鏈接mouseover上顯示數據。對於我可以做的圈子。 –

在鏈接上的鼠標懸停上顯示文本

回答

相關問題