如何处理DC范围图上的mouseout事件

Question

我正在使用DC图表范围过滤器。我想在范围过滤器上处理鼠标输出事件，所以我可以处理鼠标输出过滤器。我曾经使用过滤器和后重绘但是当我使用它时，在范围图表上的单个拖动上有多个时间事件触发。我只需要最后一次更改事件，我认为鼠标输出或鼠标注册事件会有所帮助。任何人都可以帮助我如何在范围图表上使用鼠标上移/鼠标移出事件吗？

Answer 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')
  });
});

下面的工作代码段：

＆＃13;

＆＃13;

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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;