工具提示在javascript圖形上是不可見的

我有一個問題，我真的需要你的幫助。我有一個實時圖形，數據和時間是隨機生成的，並且希望在圖形移動時提供一個工具提示以顯示路徑上該點上的時間和值。這是我的，但工具提示沒有顯示在我的圖上！ http://jsfiddle.net/QBDGB/59/這就是我在瑞德爾紛紛加入到「路徑1」，以顯示它的提示：與提示實時JavaScript的圖形工具提示在javascript圖形上是不可見的

//tooltip 

var div = d3.select("body").append("div") 
.attr("class", "tooltip") 
.style("opacity", 0); 

    var tooltip = d3.select("body").append("div") 
.attr("class", "tooltip")    
.style("opacity", 0); 

    var blueCircles = svg.selectAll("path1") 
    .data(data1s) 
     .on("mouseover", function(d ,i) { 
     tooltip.transition() 
     .duration(650) 
     .style("opacity", .9); 
     tooltip.html(formatTime(new Date(d.time)) + "<br/>" + d.value) 
     .style("left", (d3.event.pageX) + "px") 
     .style("top", (d3.event.pageY - 28) + "px"); 
     }) 
     .on("mouseout", function(d ,i) { 
      div.transition() 
       .duration(650) 
       .style("opacity", 0); 
     });

任何想法或工作的類似的例子嗎？

謝謝，

來源

2013-07-22 sasha

請幫我:( – sasha

我得到了工具提示顯示。 http://jsfiddle.net/QBDGB/67/

這是我改變，原因如下：

var blueCircles = svg.selectAll(".line1") 
    //.data(data1s)

你正經過「路徑1」的選擇。「path1」是變量的名稱，而不是類的名稱，您需要選擇類，標識或標記名稱。不是變量名稱。沒有前面字符的選擇器正在選擇標籤名稱（「a」，「body」，「head」等），而是選擇前面的「。」。爲班級選擇。這就是你想要做的事情。

我去掉了「數據」通話，因爲你已經包括了數據在這裏：

var path1 = svg.append("g") 
    .attr("clip-path", "url(#clip)") 
    .append("path") 
    .data([data1s]) 
    .attr("class", "line1");

參見選擇了D3的API更https://github.com/mbostock/d3/wiki/Selections

來源

2013-07-22 13:51:27 justinjhendrick

謝謝你這麼多你的答案，這是偉大的:) http://jsfiddle.net/QBDGB/79/是我根據你的建議，但你可以看到它沒有顯示正確的值，當光標沿着圖形移動時，每個點。如果你在圖上單擊一次，它會暫停，你可以看到，通過移動光標，該值是靜態的，它顯示最後生成的值而不是每個值點。這是我的另一個嘗試，我用圓圈做了工具提示：http://jsfiddle.net/QBDGB/53/它正確顯示了值和時間，但圓圈移動傻了。你有想法如何刪除圈子？ – sasha

還有其他一些方法可以提供工具提示。一個是追加[title]（https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title）。提供更多靈活性的另一種方式是[醉意]（http://onehackoranother.com/projects/jquery/tipsy/） – justinjhendrick

工具提示在javascript圖形上是不可見的

回答

相關問題