d3 复选框 - 标签/输入顺序

Question

我有包括标签和输入的复选框集。

最初，我制作了一个 div 作为 svg 上方标签和输入的包装器，因为我想要复选框 avobe svg。然后我根据嵌套数据键绑定数据以制作包括标签和输入的复选框。

var countryWrapper = d3.select(".checkboxWrapper")

var countryButton = 
        countryWrapper
            .selectAll(".checkboxes")
            .data(nest)
            .enter()
            .append("label")            
                .attr('for', function(d) { return d.key; })
                .text(function(d) { return d.key; })     
                .attr("class", "checkboxes")
                .attr("id", "checkbox-label")               
            .append("input")
                .attr("type", "checkbox")
                .attr("id", function(d) { return d.key; })
                .attr("value", function(d) { return d.key; })
                .attr("class", "checkboxes")

它工作正常。但是标签首先出现，然后是输入。我想颠倒顺序 - 输入（复选框）首先是标签。

这可以通过在正文中制作与键一样多次的标签来完成，但要避免手动制作的方式。

有没有办法在标签中颠倒顺序并在avobe代码中输入？ 我发现 HTML 属性 dir=rtl 和 CSS 输入 'float:left' / label 'float:right' 但是他们产生了不希望的后果，例如将 svg 推到中间或在 svg 保持在左侧时将输入/标签放在最右侧。

Answer 1

在input项后添加标签文字

var data = [{key:"apple"},{key:"banana"}];

var countryWrapper = d3.select(".checkboxWrapper");

var countryButton = 
    countryWrapper
        .selectAll(".checkbox")
        .data(data)
        .enter()
        .append("div")
        .attr("class", "checkbox");
countryButton.append("input")
    .attr("type", "checkbox")
    .attr("id", function(d) { return d.key; })
    .attr("value", function(d) { return d.key; })
    .attr("class", "checkboxes");
countryButton.append("label")
    .attr('for', function(d) { return d.key; })
    .text(function(d) { return d.key; })
    .attr("class", "checkboxes");

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

Answer 2

追加时为该组元素添加一个容器。

var nest = [{
  "name": "Test 1"
}, {
  "name": "Test 2"
}];
var countryWrapper = d3.select("#container");
var checkBoxes = countryWrapper
  .selectAll(".checkboxes")
  .data(nest)
  .enter().append("div");
  
checkBoxes.append("input")
  .attr("type", "checkbox")
  .attr("id", function(d) {
    return d.name;
  })
  .attr("value", function(d, i) {
    return (i + 1) * 10;
  });
  
checkBoxes.append("label")
  .attr('for', function(d) {
    return d.name;
  })
  .text(function(d) {
    return d.name;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="container"></div>