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

时间:2018-02-16 04:40:49

标签: d3.js dc.js

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

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

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

1 个答案:

答案 0 :(得分: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>