d3 checkbox - label / input order

Question

I have checkbox set including labels and inputs.

Initially, I've made a div as a wrapper for label and input above svg because I want to have the checkbox avobe svg. And then I bind data to make checkboxes including label and input according to nested data key.

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")

It works fine. But the label comes first followed by input. I'd like to have the order reversed - input(checkbox) first comes followed by label.

It could be done by making tags as many times as keys in body but want to avoid the way to make it manually.

Would it be any way to reverse order in label and input in avobe code? I found HTML attribute dir=rtl and CSS input 'float:left' / label 'float:right' But they made undesired consequences, like pushing svg into middle or putting the input/lable on the very right side when svg remained left.

Answer 1

Add a container for the group of elements when appending.

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>

Answer 2

Add the label text after the input item

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>