jquery - 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');
})

我的问题是鼠标悬停事件覆盖了单击事件中设置的属性。我尝试向单击的元素添加 id 并在 css 文件中设置其属性，但这不起作用。感谢您的帮助!

Answer 1

我不确定我是否完全理解您想要做什么，但我认为您可能在正确的轨道上设置 id 或 class单击的元素。但是，您可以尝试更改 mouseover 实现以使用 id 或类选择器而不是您现在使用的节点选择器，而不是使用 CSS。

所以:

d3.select("#clickedId");

或者:

d3.select(".clickedClass");

然后，您可以根据单击的圆圈上找到的样式来设置鼠标悬停的圆圈上的样式。