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事件中设置的属性。我试图在clicked元素中添加一个id并在css文件中设置它的属性，但这不起作用。谢谢你的帮助！

Answer 1

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

所以：

d3.select("#clickedId");

或：

d3.select(".clickedClass");

然后，您可以根据点击的圆圈上找到的样式在您的圈子上设置样式。

d3 mouseout更改所选元素的属性

1 个答案: