d3 multiple line chart tooltip value data undefined

[Kate Morrissey]

Hi there,

I'm having trouble getting part of my tooltip text to show up for a multiple line chart. It finds the name but not the corresponding value (y-axis value). 

I've posted my code and a screenshot of my data structure on Stack Overflow. I'm on deadline with this for work, so I'm hoping someone might be able to take a quick look at help me out.

Thanks so much!!

Kate

[Seemant Kulleen]

Hi Kate,

This is a bit non-trivial, as you have to use the mouse/touch position to figure out the year, and then go and find the value that corresponds to the year.

This turns out to be a bit clunky, but you could consider something like this for the mouseover code:

            svg.selectAll(".line")
                .on("mouseover", function(d) {
                    var xPosition = d3.event.pageX;
                    var yPosition = d3.event.pageY;
                          var year = x.invert(xPosition).getFullYear();
                          var arrests = d.values.filter(function(v) { return v.year.getFullYear() === year; })[0];
                    d3.select("#tooltip")
                        .style("left", xPosition + "px")
                        .style("top", yPosition + "px")
                        .select("#value")
                        .text(d.name + " " + arrests.arrests);

(It might also help to clamp(true) the x scale).

Here's a working blockbuilder: http://blockbuilder.org/anonymous/813bb23f1cae7f991e8e97f1d99c39bd

Hope that helps.

Cheers,

Seemant

 

--

Oakland Finish Up Weekend
Be Amazed.  Be Amazing.
Get Mentored | Get Inspired | Finish Up

http://oaklandfinishup.com

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Kate Morrissey]

Seemant--thank you! This is definitely progress. The only thing is that toward the right end of the lines, it's showing as undefined still. Not sure why.

[Kate Morrissey]

OK Figured out why--the year variable is not getting the year right. It thinks 2014 is 2017. Not sure why that's happening though.

[Seemant Kulleen]

Hi Kate,

Glad you're making progress.  Please look at clamp: https://github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md

as it might help. :)

--

Oakland Finish Up Weekend
Be Amazed.  Be Amazing.
Get Mentored | Get Inspired | Finish Up

http://oaklandfinishup.com