d3 mouseout changes attributes of selected element

Question

I have SVG circles and text elements which change color when hovered over...

var texts = svgcontainer.selectAll('text.year')
.data(yeardata).enter().append("svg:a")
.attr('class', 'year')
.append('text').text(function(d) { return d;})
.attr('dx', function(d) { return Math.random()*containerWidth})
.attr('dy', function(d) { return Math.random()*containerWidth})
.attr("xlink:href", '#')
.attr('pointer-events', 'all')
.attr('font-size', function(d) { return scale2(d) })
.style('font-family', 'Arial')
.attr('font-weight', 'bold')
.attr('font-style', 'italic')
.attr('fill', '#161738')
.on("mouseover", function(d, i) {
  d3.select(this)
  .transition()
  .duration(200)
  .attr('font-size', function(d) { return 45 })
  .attr('opacity', .5);
  d3.select(circles[0][i])
  .style('fill', 'red');
})
.on("mouseout", function(d, i) {
  d3.select(this)
  .transition()
  .duration(200)
  .attr('font-size', function(d) { return scale2(d) })
  .attr('opacity', 1);
  d3.select(circles[0][i])
  .style('fill', '#3CCAFA');
})
.transition()
.duration(1100)
.attr('dx', function(d) { return d*space + 15.5 })
.attr('dy', 34);

I also want the selected (clicked on element) to have the same attributes of a one that is hovered over.

$('.year').click(function() {
val = ... // this works
years = d3.selectAll('.year');
d3.select(this)
  .attr('opacity', .5)
d3.select(circles[0][val])
  .style('fill', 'red');
})

My problem is that the mouseover event overrides the attributes set in the click event. I tried to add an id to the clicked on element and set its attributes in the css file but this didn't work. Thanks for the help!

Answer 1

I'm not sure I understand exactly what you're trying to do but I think you're probably on the right track setting an id or class on the clicked element. But instead of using CSS you could try changing your mouseover implementation to use an id or class selector instead of the node selector you're using now.

So:

d3.select("#clickedId");

or:

d3.select(".clickedClass");

Then you can set the styles on your moused over circle based on the styles found on the clicked circle.