bootstrap.js会干扰单选按钮D3的选择

时间:2020-05-15 16:36:52

标签: javascript d3.js bootstrap-4

我正在尝试使用d3触发有关无线电输入更改的事件。看来,如果我在bootstrap.js中使用bootstrap btn-group单选按钮方案(如下所示),则会干扰d3的选择。

<div id="selector" class="btn-group btn-group-toggle btn-group-lg" data-toggle="buttons" role="group">
<label class="btn btn-secondary active">
    <input type="radio" name="radio_test" id="set1" value="1" checked> 1
</label>
<label class="btn btn-secondary">
    <input type="radio" name="radio_test" id="set2" value="2"> 2
</label>
<label class="btn btn-secondary">
    <input type="radio" name="radio_test" id="set3" value="3"> 3
</label>
</div>

选择D3:

d3.selectAll('input[type="radio"][name="radio_test"]')
    .on('change',function() {
    console.log(this.value);
  })

An example of the problem can be found at this JSFiddle link。删除bootstrap.js文件确实可以使d3选择起作用,但是将删除bootstrap提供的按钮切换。

现在,我只能使用JQuery选择器,但是能够使用d3很好。可以使用d3选择使此工作正常吗?

0 个答案:

没有答案