Question

我使用D3选择语句从2个不同的脚本访问HTML日期输入。

但是，只有最后一个脚本能够访问日期，而不是之前的日期。下面的代码描述了我的问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>

</head>
<body>


  From <input id="dateFrom" type="date" > To <input id="dateTo" type="date"><input id="submit" type="submit" value="Send Request">


<script src="https://d3js.org/d3.v4.js"></script>


<script type="text/javascript">


var data=[{"time":new Date('Tue Jan 30 2018 01:58:57 GMT+0100 (CET)'),"value":1},{"time":new Date('Wed Jan 31 2018 01:58:57 GMT+0100 (CET)'),"value":1}
  ,{"time":new Date('Thu Feb 01 2018 01:58:57 GMT+0100 (CET)'),"value":1},{"time":new Date('Fri Feb 02 2018 01:58:57 GMT+0100 (CET)'),"value":1},{"time":new Date('Sat Feb 03 2018 01:58:57 GMT+0100 (CET)'),"value":1}
,{"time":new Date('Sun Feb 04 2018 01:58:57 GMT+0100 (CET)'),"value":1},{"time":new Date(' Mon Feb 05 2018 01:58:57 GMT+0100 (CET)'),"value":1}];

var dateF;
var dateT;

d3.select('#dateFrom')
  .on('input',function()
      {
        dateF = new Date(d3.select('#dateFrom').property('value'))
      });

d3.select('#dateTo')
  .on('input',function()
      {
        dateT = new Date(d3.select('#dateTo').property('value'))
      });

  </script>
  <script type="text/javascript">


var dataFiltered1;
  d3.select('#submit')
    .on('click',function(){
      dataFiltered1=data.filter(function(d){
        return d.time>=dateF && d.time<=dateT;
      });
      console.log(dataFiltered1);
    });

  </script>
  <script type="text/javascript">

  var dataFiltered2;
  d3.select('#submit')
    .on('click',function(){
      dataFiltered2=data.filter(function(d){
        return d.time>=dateF && d.time<=dateT;
      });
      console.log(dataFiltered2);
    });
  </script>

    <script src="https://d3js.org/d3.v4.js"></script>
</body>
</html>

您将观察到，最后一个脚本中只有dataFiltered2将被记录到控制台，而dataFiltered1将不会收到日期输入，因此将为undefined。

Answer 1

这是预期的行为。第二个脚本添加一个新的事件监听器，它会覆盖第一个。

API对此很清楚：

selection.on（typenames [，listener [，capture]]）

为指定的事件类型名称添加或删除每个选定元素的侦听器[...]可选名称允许注册多个回调以接收相同类型的事件，例如{{ 1}}和click.foo。（强调我的）

看看这个演示，其中两个脚本将侦听器添加到相同的元素：

＆＃13;

click.bar

＆＃13;

请注意每个事件的类型名称都不同。

两个脚本将不同的侦听器添加到同一个元素

1 个答案: