d3.js範圍選擇器不過濾工具提示

Question

嗨我已經修改了幾個d3.js演示項目以滿足我的要求。但面臨的問題很少。下面是jsfiddlehttps://jsfiddle.net/dibyendu/fmtygLfv/ 使用範圍選擇器我tooltips不過濾它們保持相同。此外tooltips沒有正確放置，我不能把我的​​中的任何special character像目前它是0.1到1.0但0.0-0.1 to 0.9-1.0不起作用。

Answer 1

首先，對於散點圖，您將追加到svg。您需要追加到創建路徑的相同區域。因此，而不是（上線110）：

svg.selectAll("dot") 

務必：

focus.selectAll("dot") 

更新小提琴：https://jsfiddle.net/thatoneguy/fmtygLfv/2/

至於點（提示）。我已經在這樣的功能中創建了點：

// Add the scatterplot 

function addScatter(){ 

     focus.selectAll(".dot").data(data)   
     .enter().append("circle").attr('class','dot')        
     .attr("r", 5)  
     .attr("cx", function(d) { return x(d.date); })  
     .attr("cy", function(d) { return y(d.price); })  
     .on("mouseover", function(d) {  
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html(d.date + "<br/>" + d.price) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      })     
     .on("mouseout", function(d) {  
      div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     }); 
     } 
addScatter() 

立即實例化它。現在這個可以在你刷的時候使用。更新刷：

function brushed() { 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.select(".area").attr("d", area); 
    focus.select(".x.axis").call(xAxis); 
    focus.selectAll(".dot").remove() ; //remove current dots 
    addScatter() 
} 

通知我打電話addScatter之前，我刪除已經存在的點。這現在工作正常。

更新小提琴：https://jsfiddle.net/thatoneguy/fmtygLfv/5/

至於你的刻度值。看看這個例子：D3 - using strings for axis ticks

目前你的數據顯示的日期範圍從0.2到1.0。他們是單一的價值觀而不是自己的範圍。

所以，如果你的數據是這樣的：

var data = [{ "date":"0.1-0.2", "price":394.46}, 
    { "date":"0.2-0.3", "price":1366.42}, 
    { "date":"0.3-0.4", "price":1498.58}, 
    { "date":"0.4-0.5", "price":1452.43},//and so on 

你可以使用，從上面的例子中，像這樣的刻度值：

.tickFormat(function(d, i){ 
    return d.date; // this will return (if data is edited) 0.1-0.2, 0.2-0.3 and so on 
}) 

這意味着編輯您的數據。