d3 checkbox - метка / порядок ввода

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 в середину или поместив input / lable в самую правую сторону, когда 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>