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

问题描述

我正在使用DC图表范围过滤器。我想在范围过滤器上处理鼠标移出事件，因此可以在鼠标移出时处理过滤器。我曾经使用过过滤器和重绘后功能，但是当我使用此功能时，在距离图上的一次拖动会触发多个时间事件。我只需要最后一次更改事件，我认为将鼠标移出或将鼠标移到上面的事件将有所帮助。谁能帮我如何使用范围图表上的鼠标上移/鼠标移出事件？

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?

推荐答案

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

以下工作段：

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>

这篇关于如何处理DC范围图上的mouseout事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！