Highlight a related object on mouseover

[Rebecca Garlock Ong]

I'm trying to make a control chart that is basically two line charts in one, showing the results of two parameters for the same batch of material. I've got it almost finished but am having trouble with the last thing I want to do. On mouseover of either data point for a given batch I want a transparent bar to appear behind both data nodes. The bars are just bar chart rectangles and are linked to the batch. The bars are all there if I turn off the opacity. But when I mouseover a data node, only the first bar appears, no matter which batch the node belongs to. I'm sure there must be an easy fix for this, but I'm pretty new to coding so any help would be great. 

Here's my fiddle: http://jsfiddle.net/cinnamonfern/A4aP9/

Thanks!!

[Shreeram Kushwaha]

Dear Rebecca,

Where is the input csv file?

--
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/groups/opt_out.

--

Regards,

(Voice  +91-7849069144)
( Shreeram Kushwaha )
Software Engineer

Samsung R&D Institute India - Bangalore

[Rebecca Garlock Ong]

I've attached the csv file. I don't know if I can attach that in my fiddle and I was having a hard time adjusting the code to take the data as part of the code itself. 

The code related to the mouseover are below. I've only included it for the one node because the other is nearly identical.  I think that the issue is that I need to select something other than (".bar") to highlight the bars I want, but nothing else that I've tried has worked.

var batchBand = g.selectAll(".bar")

.data(data)

.enter().append("rect")

.attr("class", "bar")

.attr("height", height)

.attr("width", xBand.rangeBand())

.attr("x", function(d) {return x(d.batch)-xBand.rangeBand()/2});

var mouseover = function(d) {

d3.select(this).style("stroke", "navy");

d3.select(".bar").transition().duration(100).style("fill-opacity", .5);

var glucoseDot = g.selectAll("circle.line")

.data(data)

.enter().append("svg:circle")

.attr("class", "glucose")

.attr("r", radius) 

.attr("cx", function(d) {return x(d.batch);})

.attr("cy", function(d) {return y(d.glucose);})

.style("stroke", function(d){

if (d.glucose > gluUpper2MAD || d.glucose < gluLower2MAD){return "orangered";} 

else if (d.glucose > gluUpper1MAD || d.glucose < gluLower1MAD){return "orange";}

})

.on("mouseover", mouseover)

.on("mouseout", function(d){

d3.select(".bar").transition().duration(100).style("fill-opacity", 0);

d3.select(this).style("stroke", function(d) {

if (d.glucose > gluUpper2MAD || d.glucose < gluLower2MAD){return "orangered";} 

else if (d.glucose > gluUpper1MAD || d.glucose < gluLower1MAD){return "orange";}

})

[Amelia Bellamy-Royds]

I think I've got what you wanted working.  

http://jsfiddle.net/EhQMv/1/

Yes, your problem was definitely that you were selecting a class without linking it to any particular data object, so the first instance of that class (anywhere on the page) was being returned.  Since the batch number is unique, I just added a batch-specific class at the time of the datajoin that you can then select later.  

Another option -- semantically better but requiring more changes to the code -- would be to have all the elements associated with each row of data (both dots and the transparent bar) as children of a <g> element, and make the datajoin once to that group instead of multiple times for each graphical element.  Then you could just add the mouseover events to the group, and use d3.select(this).selectAll(".bar") to get the bar for the appropriate group.  You could even take that part completely out of the javascript and just add a "g.data-batch:hover > .bar {opacity:0.5;}"  rule to the CSS (assuming you've given all the data-row groups an appropriate class, and already defined CSS transitions on the .bar class).  You could likewise use classes and CSS rules for changing the dot colour and making the tooltip appear or disappear, and the javascript mouseover method would only be for updating the tool-tip text and position, meaning you wouldn't need a mouseout method at all.

But first, getting the data hard-coded in JSFiddle; I commented out the d3.csv method AND the final closing brackets for it at the end of the script, and just replaced it with a defined data object.  To switch back, make sure you un-comment both the csv method and it's end brackets.

[Rebecca Garlock Ong]

Thanks!  That's perfect!  I might try your idea on grouping things. I saw someone do that in an example I checked yesterday. I'm still trying to wrap my brain around it. This is the first thing I've made in javascript, so I'm having fun figuring things out - this is the first thing that stumped me. 

[Amelia Bellamy-Royds]

Glad to help.  I'm just teaching myself D3 and javascript as well, so going through other people's questions is a good incentive to actually try out all the things I've been reading in tutorials, and make sure I actually can do what I think I should be able to do...  

--ABR

[Rishu Oberoi]

In the same fiddle above, if you have to highlight the lines instead - hover over a line and highlight it. How would you?