ROI值d3js面積圖

我d3js基於區域圖@http://plnkr.co/edit/4EEe7EyGRRUH4lJXpHhr?p=preview &這裏http://jsfiddle.net/g30zhvy8/其中前者使用數據和後者的使用數據，雙方都工作的代碼，以顯示工具提示。ROI值d3js面積圖

svg.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area);

首先，爲什麼提示似乎比圖表的 Z-索引少其次如何顯示值最接近給定一個人的或內插一個在工具提示中面積圖的特定點。類似的問題在幾個地方被問到。

這提示代碼適用於剩餘d3js味圖表，如酒吧，餅圖，圓環圖，線等

來源

2015-12-23 Rohit Nandan

文字也少Z指數：它，因爲你是第一個創建的提示，然後這樣的路徑的路徑將在工具提示前面。在svg中沒有z-index的概念。因此，我們需要先製作路徑，然後再製作工具提示。

要獲得鼠標懸停工具提示請執行下列操作（在下面的代碼片段評論）：

svg.append("path") 
    .data([data]) //this is equivalent to datum(data) 
    .attr("class", "area") 
    .attr("d", area) 
    .on("mouseover", function() { 
     tooltip.style("display", null); 
    }) 
    .on("mouseout", function() { 
     tooltip.style("display", "none"); 
    }) 
    .on("mousemove", function(d) { 
     var xPosition = d3.mouse(this)[0] - 15;//x position of tooltip 
     var yPosition = d3.mouse(this)[1] - 25;//y position of tooltip 
     tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");//placing the tooltip 
     var x0 = x.invert(d3.mouse(this)[0]);//this will give the x for the mouse position on x 
     var y0 = y.invert(d3.mouse(this)[1]);//this will give the y for the mouse position on y 
     tooltip.select("text").text(d3.time.format('%Y-%m-%d')(x0)+ " " +Math.round(y0));//show the text after formatting the date 
    });;

工作代碼here

希望這有助於！

來源

2015-12-24 01:00:11 Cyril

是的，它是在一個plunker但不作爲角度指令作爲查詢在這裏http://stackoverflow.com/questions/34470062/d3js-angular-directive-for-area-chart-using-d3-mouse-event-for -tooltip –

ROI值d3js面積圖

回答

相關問題