垂直條在javascript中顯示值

我有一個問題，我真的需要你的幫助。我有一個實時圖形，它帶有一個隨光標移動的垂直條，我希望它在光標指向時顯示圖形的值（d.time和d.value）。 http://jsfiddle.net/QBDGB/54/我有兩個系列，其隨機產生的數據（data1s和data2s）的我把其中在「時間」被生成的數據的時間變量，你可以看到：垂直條在javascript中顯示值

now = new Date(Date.now() - duration); 

var data1 = initialise(); 
var data2 = initialise(); 


//Make stacked data 

var data1s = data1; 
var data2s = []; 
for(var i = 0; i < data1s.length; i++){ 
data2s.push({ 
value: data1s[i].value + data2[i].value, 
time: data2[i].time 
} 
)}; 

function initialise() { 

var arr = []; 
for (var i = 0; i < n; i++) { 
    var obj = { 
time: Date.now(), 
value: Math.floor(Math.random() * 100) 
}; 
    arr.push(obj); 
} 

return arr;

}

當我懸停在圖表上我希望工具提示顯示時間和價值，但它不能識別它並顯示「未定義」，因爲我不知道如何傳遞我的數據集（data1s和data2s），所以「mouseover函數可以識別顯示哪些數據！這是工具提示功能的製作方法，以及從「path1」和「path2」的調用。

function mouseover() { 
    div.transition() 
    .duration(500) 
    .style("opacity", 1); 
} 

function mousemove(d) { 



div 
    .text(d.time+ ", " + d.value) 
    .style("left", (d3.event.pageX) + "px") 
    .style("top", (d3.event.pageY) + "px"); 
} 

    function mouseout() { 
    div.transition() 
    .duration(500) 
    .style("opacity", 1e-6); 
} 

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


    var path2 =svg.append("g") 
    .attr("clip-path", "url(#clip)") 
    .append("path") 
    .data([data2s]) 
    .attr("class", "line2") 
    .on("mouseover", mouseover) 
    .on("mousemove", mousemove) 
    .on("mouseout", mouseout);

你有什麼想法做什麼？我想我需要添加

svg.selectAll("path1") 
.attr("opacity", 1) 

or svg.selectAll("datas1") 
.attr("opacity", 1)

某處！但我不知道

如何..謝謝你，

來源

2013-07-22 sasha

哇！好的應用程序你還可以修復你的代碼縮進來反映它的迷人嗎？ – jsalonen

你是否在取笑我;）工具提示無法正常工作。所以我們不能稱它爲好的應用程序！：P你有任何想法或類似的例子向我介紹。我真的阻止了它:( – sasha

你檢查了這一個：http://jsfiddle.net/albanlopez/D4MRP/8/（它獲得時間和價值） – acudars

更新您的鼠標懸停功能：

function mousemove(d) { 

div 
.text(d[0].time+ ", " + d[0].value) 
.style("left", (d3.event.pageX) + "px") 
.style("top", (d3.event.pageY) + "px"); 
}

包括索引對象 'd'。

希望有所幫助。

來源

2013-07-22 09:14:24 SHANK

非常感謝你的幫助，它顯示了一些值，但它仍然無法識別正確的值，我更新了你在這裏推薦的內容：http://jsfiddle.net/ QBDGB/54 /和我做了另一個圖表，顯示了正確的值，但我不知道如何擺脫圈子！http://jsfiddle.net/QBDGB/52/ – sasha

代碼有一些變化，一些blueCircle功能是在代碼中有導致藍點，請檢查這一點 – SHANK

謝謝你的時間，但我不知道你的意思，你能解釋我更多？如果我可以刪除藍色的圓圈，我可以達到到正確的工具提示，我不喜歡他們上下跳動的方式但至少他們可以識別正確的值，因爲這個「部分：svg.selectAll（」dot「） .data（data1s）」但我怎麼能在我以前的版本中有這部分？ :(我真的被阻止在這.. – sasha

垂直條在javascript中顯示值

回答

相關問題