Question

所以我有一个更改复选框的功能

somefunction() {
    d3.select("input").property("checked", true);
}

并且我在另一个函数中检测到复选框中的更改，如下所示：

d3.selectAll("input").on("change", change);

我遇到的问题是当它更改复选框而没有点击它时，它不会将其检测为＆＃34;正确的＆＃34;更改。我该怎么做才能让它发现其他东西将其改变为“正确的”＃34;改变？

Answer 1

d3正在使用on方法中的标准SetPermissions。您遇到的问题是更改addEventListener的已检查属性addEventListener以便收听。正确的方法是在设置预言后自己调用处理程序：

var myInput = d3.select("input");
myInput.property("checked", true);
myInput.on("change")(); // call it yourself

完整的工作代码：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>

  <body>
    <input type="checkbox" />
    <script>
      
      var checked = false;
      setInterval(function(){
        checked = !checked;
        var myInput = d3.select("input");
        myInput.property("checked", checked);
        myInput.on("change")();
      }, 2000);
      
      
      d3.select("input").on("change", function(d){
        console.log('checkbox changed');
      });

    </script>
  </body>

</html>

Answer 2

Mark提出的解决方案完美无瑕地工作但是我还想提一下，除了自己调用事件处理程序之外，您可以自己触发事件并保留其余的代码。 onchange事件由以下序列focus-valueChange-unfocus触发。现在，如果在不点击它的情况下更改它，就不会发生这种情况，值会发生变化，但没有焦点。无论如何，你可以自己触发onchange事件，而不是依靠它。我在这里创造了一个解释它的小提琴。希望它有所帮助：https://jsfiddle.net/xcjje9r3/6/

window.clickMe = function() {
  tmp = d3.select('#cbox');
  if (tmp.property('checked') == false) tmp.property('checked', true);
  else tmp.property('checked', false);
  tmp[0][0].dispatchEvent(evt); //MANUALLY TRIGGER EVENT
}
//tmp[0][0] is becoz d3.select returns an array and [0][0] position stores the actual DOM element in this array.

window.listenerInitialize = function() {
  evt = document.createEvent("HTMLEvents"); //CREATE NEW EVENT WITH TYPE
  evt.initEvent("change", false, true); //THE EXACT EVENT TO FIRE
  d3.select('#cbox').on('change', alerting); //ADDING LISTENER FOR EVENT
}

window.alerting = function() {
  alert('testEvent');
}

当我在d3js中以编程方式执行时，为什么没有触发复选框更改事件

2 个答案: