2

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

4

1 回答 1

0

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

所以：

d3.select("#clickedId");

或者：

d3.select(".clickedClass");

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

于 2013-09-19T05:48:09.443 回答