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

Question

我设置了复选框，包括标签和输入。

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

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>