CODEWITHSUNDEEP
d3.jsdc.js
Aniruddha
Aniruddha

Reputation: 61

dc.js : how to change circle color on mouseover

I'm trying to highlight the color of the circle in my time series chart built using dc.js. I've found few solutions online where they mention about SelectAll() method. But it will select all the circles and not the specific one where I do mouseover.

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

Can someone please help on how to apply color to the circle where I do mouseover in dc.js

Upvotes: 1

Views: 1792

Answers (1)

Aditya
Aditya

Reputation: 1377

You need to use the this keyword to refer to the circle you are hovering on. I've created a simple fiddle to get you started.

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>

Upvotes: 1

Related Questions