Question

我正在尝试突出显示使用dc.js构建的时间序列图表中圆圈的颜色。我在网上找到了很少的解决方案，他们提到了SelectAll（）方法。但它会选择所有圈子，而不是我鼠标悬停的特定圈子。

 chart.selectAll("circle")
      .style("fill", "orange")

有人可以帮忙说明如何将颜色应用到我在dc.js中进行鼠标悬停的圆圈

Answer 1

您需要使用this关键字来引用您正在悬停的圈子。我创造了一个简单的小提琴，让你开始。

var chart = d3.select('#chart')
  .style('fill', 'orange')

chart.selectAll('circle').on('mouseover', function() {
  d3.select(this).attr('fill', '#00c')
}).on('mouseout', function() {
  d3.select(this).attr('fill', 'orange')
})

<link href="https://dc-js.github.io/dc.js/css/dc.min.css" rel="stylesheet" />
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.15/d3.min.js"></script>
<svg id='chart' height="100" width="400">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"  />
  <circle cx="80" cy="50" r="40" stroke="black" stroke-width="3"  />
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="3"  />
  <circle cx="150" cy="50" r="40" stroke="black" stroke-width="3"  />
</svg>

dc.js：如何在鼠标悬停时更改圆形颜色

1 个答案: