d3.js range selector not filtering tooltip

Question

Hi I have modified couple of d3.js demo projects to meet my requirement. But facing few problems.Here is the jsfiddle https://jsfiddle.net/dibyendu/fmtygLfv/ With range selector my tooltips are not filtering they are staying same as it is. Also the tooltips are not placed properly and I cant put any special character in my X-axis like currently it is 0.1 to 1.0 but 0.0-0.1 to 0.9-1.0 is not working .

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

First off, for the scatter plot, you are appending to the svg. You need to append to the same area the path is created at. So instead of (on line 110) :

svg.selectAll("dot")

Do :

focus.selectAll("dot")

Updated fiddle : https://jsfiddle.net/thatoneguy/fmtygLfv/2/

As for the dots (tooltips). I have put the creation of the dots in a function like so :

// 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()

Instantiated it straight away. Now this can be used when you brush. Updated brush :

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

Notice before I call addScatter I delete the dots that are already there. This works fine now.

Updated fiddle : https://jsfiddle.net/thatoneguy/fmtygLfv/5/

As for your tick values. Look at this example : D3 - using strings for axis ticks

At the moment you data shows dates ranging from 0.2 - 1.0. They are single values and not themselves ranges.

So if your data looked like this :

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

You could use, from the example above, the tick values like so :

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

This would mean editing your data.

edited May 23 '17 at 12:31

Community

1
1

answered Apr 20 '16 at 11:35

thatOneGuy

9,977
7
48
90

Make sense @thisOneGuy – curiousguy Apr 20 '16 at 11:38
@DibyenduDutta updated. think there was one more problem you had – thatOneGuy Apr 20 '16 at 11:43
Your final problem with the special characters, I am unsure on why you would want to do this ? The axis is there to show data at the point, you can't have both 0.9 and 1.0 at the same point :/ – thatOneGuy Apr 20 '16 at 11:47
Yes @thisOneGuy . Actually my `X-axis` values will be range , it is how the data is designed.And i am trying to put the same in `X-axis` – curiousguy Apr 20 '16 at 11:50
added to answer. You will have to edit your data to change the tick format as described in my updated answer – thatOneGuy Apr 20 '16 at 12:00
`var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function(d, i){ return d.date; }) ` this is correct ? – curiousguy Apr 20 '16 at 12:05
I think we have to modify how we are generating range also . like `x=d3.scale.linear()` should be `d3.scale.ordinal()` right ? – curiousguy Apr 20 '16 at 12:11
the ticks are being shown exactly how your data is. As of now your data is getting interpreted as integers, you want it to be, for example, 0.1-0.2, this is not an integer but a string. So to do this your data must be changed. For example, look at this bar chart : https://bl.ocks.org/mbostock/3885304, the data shows letters a-z with values. The ticks are instantiated like so : x.domain(data.map(function(d) { return d.letter; })); Do you understand ? – thatOneGuy Apr 20 '16 at 12:20
Yes I do understand I have to change my data. What I am asking here is we have to modify how we are generating range also . like x=d3.scale.linear() should be d3.scale.ordinal() right ? – curiousguy Apr 20 '16 at 12:23
Yes as you are using strings – thatOneGuy Apr 20 '16 at 12:27

d3.js range selector not filtering tooltip

1 Answers1