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!