d3 MouseOut изменяет атрибуты выбранного элемента

Question

Я имею SVG круги и текстовые элементы, которые меняют цвет, когда завис над ...

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); 

Я также хочу, чтобы выбрать (нажал на элемент), чтобы иметь одни и те же атрибуты который завис над.

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

Моя проблема заключается в том, что событие mouseover переопределяет атрибуты, установленные в событии click. Я попытался добавить идентификатор к клику на элемент и установить его атрибуты в файле css, но это не сработало. Спасибо за помощь!

Answer 1

Я не уверен, что я точно понимаю, что вы пытаетесь сделать, но я думаю, что вы, вероятно, на правильном пути, установив id или class на элемент с щелчком. Но вместо использования CSS вы можете попробовать изменить реализацию mouseover, чтобы использовать селектор id или класса вместо выбранного вами селектора узлов.

Итак:

d3.select("#clickedId"); 

или:

d3.select(".clickedClass"); 

Затем вы можете установить стили на вашем наведение мышки на круг на основе стилей, найденных на щелкнутом круге.