Question

我想按程序构建以下单选按钮。

<input type="radio" name="bees">5<br />
<input type="radio" name="bees">10<br />
<input type="radio" name="bees">20

如果我使用如下代码：

function build_colony() {
    const bees_list = [5, 10, 20];
    d3.select('.colony)
      .selectAll('input')
      .data(bees_list)
      .enter()
      .append('input')
      .attr('type', 'radio')
      .attr('name', 'bees')
      .text(d => d);
}

我将结束</input>：

<div class="colony">
    <input type="radio" name="bees">5</input>
    <input type="radio" name="bees">10</input>
    <input type="radio" name="bees">20</input>
</div>

如何与D3的结束标记不匹配？

Answer 1

您不希望文本嵌套在输入中。因此，我将使用占位符span处理我的数据绑定，以便您的input和label可以成为同级兄弟。

<!DOCTYPE html>
<html>

<head>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <div class="colony"></div>
  <script>
    let bees_list = [5, 10, 20];
    
    var s = d3.select('.colony')
        .selectAll('span')
        .data(bees_list)
        .enter()
        .append('span');

      s.append('input')
        .attr('type', 'radio')
        .attr('name', 'bees')
        .attr('id', d => d);
        
      s.append('label')
        .text(d => d)
        .attr('for', d => d);
  </script>
</body>

</html>

如何与D3的结束标签不匹配？

1 个答案: