Question

使用D3组装一些radio buttons之后

function build_rb() {
    let mylist = d3.range(5);
    let spans = d3.select('body')
                  .selectAll('span')
                  .data(d3.range(5))
                  .enter()
                  .append('span');
    spans.append('input')
         .attr('type', 'radio')
         .attr('name', 'rbname')
         .attr('id', d => d);
    spans.append('label')
         .html(d => ("display: " + d))
         .attr('for', d => d);
}
function get_rb() {
    let sel = d3.select('input[name="rbname"]:checked')
                .node().id;
    return sel;
}
build_rb();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

我可以通过调用get_rb() determine选中单选按钮。

如果我对select / option构造执行相同操作

function build_so() {
    d3.select('body')
      .append('select')
      .attr('id', 'soname')
      .selectAll('option')
      .data(d3.range(5))
      .enter()
      .append('option')
      .attr('value', d => d)
      .text(d => ("display: " + d));
}
function get_so() {
    let select = document.getElementById('soname');
    let current = select.options[select.selectedIndex].value;
    return current;
}
function get_so_d3() {
    let select = d3.select('select[name="soname"]:checked');
    let current = select.node().id;
    return current;
}
build_so();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

我可以找到使用准系统JS（get_so）而不是D3（get_so_d3）选择的选项。

为什么？

相关：1，2，3

Answer 1

因为选择器错误。 :checked应该在option上，而不是select上。然后按name属性进行选择，但“ soname”被定义为一个id。

function build_so() {
    d3.select('body')
      .append('select')
      .attr('id', 'soname')
      .selectAll('option')
      .data(d3.range(5))
      .enter()
      .append('option')
      .attr('value', d => d)
      .text(d => ("display: " + d));
}
function get_so_d3() {
    let select = d3.select('select[id="soname"] option:checked');
    let current = select.datum();
    return current;
}
build_so();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button onclick="console.log(get_so_d3())">console log</button>

使用D3确定选择/选项

1 个答案: