d3.js диапазон селектор не фильтрующий всплывающая подсказка

Question

Привет, я изменил пару демо-проектов d3.js для удовлетворения моих требований. Но перед несколькими проблемами. Вот jsfiddlehttps://jsfiddle.net/dibyendu/fmtygLfv/ С селектором диапазонов tooltips не фильтруют, они остаются такими же, как есть. Также tooltips не установлены должным образом, и я не могу положить special character в свои X-axis, как в настоящее время 0.1 - 1.0, но 0.0-0.1 to 0.9-1.0 не работает.

Answer 1

Прежде всего, для участка разброса вы добавляете к svg. Вам нужно добавить в ту же область, в которой был создан путь. Таким образом, вместо (на линии 110):

svg.selectAll("dot") 

Do:

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 
}) 

Это будет означать редактирование данных.