將工具提示添加到使用svg路徑生成的條形圖

如何將工具提示添加到使用svg路徑生成的條形圖中的每個條形圖...是否可以使用引導工具提示...？我提供以下將工具提示添加到使用svg路徑生成的條形圖

我在下面撥弄 http://jsfiddle.net/mfAc4/6/提供的SVG條形圖產生

<path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100"/>

我的SVG路徑... 我如何添加提示到各條？

任何建議，將不勝感激。

來源

2012-11-02 selvagsz

不確定bootstrap是什麼意思，但大多數UA會將標題元素子元素轉換爲工具提示。例如。

<path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100"> 
    <title>tooltip text</title> 
</path>

來源

2012-11-02 13:17:33

看一看：在你的jsfiddle http://bl.ocks.org/2973775

注意，你實際上並沒有使用D3。但是你可以很容易地將它添加到得到一個提示看here：

var svg = d3.select("svg").attr("width", 400).attr("height", 400); 

var vis = svg.append('g'); 

var txt = vis.append('text') 
    .attr({ transform: 'translate(5,20)', fill:'red'}) 
    .text("Node Info"); 

d3.selectAll('.bar') 
    .on("mouseover", function(d) { 
     var mousePos = d3.mouse(this); 
     txt.text(mousePos); 
     txt.attr({transform: 'translate(' + mousePos + ')'}); 
    }) 
    .on("mousemove", function(d) { 
     var mousePos = d3.mouse(this); 
     txt.attr({transform: 'translate(' + mousePos + ')'}); 
    });

要搞清楚，你將不得不看看鼠標x位置這吧。你應該考慮使用d3 scale（它將在兩個方向上映射 - 檢查反轉功能）。

來源

2012-11-07 20:18:47 Superboggly

將工具提示添加到使用svg路徑生成的條形圖

回答

相關問題