How to handle mouseout event on DC range graph

问题

I am using DC chart range filter. I want to handle mouse out event on range filter, so I can handle filter on mouse-out. I had used filter and post-redraw but when I use this there are multiple time event fire on single drag on range chart. I need only the last change event and I think a mouse out or mouse up event would be helpful. Can any one help me with how to use mouse up/mouse out event on range Chart?

回答1:

chart.on('postRender', function() {
  chart.select('.brush').on("mouseover", function() {
    console.log('mouseover');        
  });
  chart.select('.brush').on("mouseout", function() {
    console.log('mouseout');
  });
  chart.select('.brush').on("mouseup", function() {
    console.log('mouseup')
  });
  chart.select('.brush').on("click", function() {
    console.log('click')
  });
});

Working snippet below:

var data = [{
  date: "2011-11-21",
  total: 90
}, {
  date: "2011-11-22",
  total: 90
}, {
  date: "2011-11-23",
  total: 90
}, {
  date: "2011-11-24",
  total: 200
}, {
  date: "2011-11-25",
  total: 200
}];
var cf = crossfilter(data);

var timeDimension = cf.dimension(function(d) {
  return new Date(d.date);
});
var totalGroup = timeDimension.group().reduceSum(function(d) {
  return d.total;
});

var chart = dc.lineChart("#chart")
  .width(400)
  .height(200)
  .x(d3.time.scale().domain(d3.extent(data, function(d) {
    return new Date(d.date);
  })))
  .dimension(timeDimension)
  .group(totalGroup)
  .renderArea(true)
  .brushOn(true);
chart.xAxis().ticks(4);

function caught(eventName) {
  document.getElementById(eventName).className = 'bold';
  setTimeout(function() {
    document.getElementById(eventName).className = '';
  }, 750);
}

chart.on('postRender', function() {
  chart.select('.brush').on("mouseover", function() {
    console.log('mouseover');
    caught('mouseover');
  });
  chart.select('.brush').on("mouseout", function() {
    console.log('mouseout');
    caught('mouseout');
  });
  chart.select('.brush').on("mouseup", function() {
    console.log('mouseup')
    caught('mouseup');;
  });
  chart.select('.brush').on("click", function() {
    console.log('click')
    caught('click');;
  });
});

chart.render();

<link href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.js"></script>
<style>
  .bold {
    font-weight: bold;
  }
</style>
<div id="chart"></div>
<div id="mouseout">mouseout</div>
<div id="mouseover">mouseover</div>
<div id="mouseup">mouseup</div>
<div id="click">click</div>

来源：https://stackoverflow.com/questions/31523772/how-to-handle-mouseout-event-on-dc-range-graph