d3复选框-标签/输入顺序 [英] d3 checkbox - label / input order

问题描述

我设置了包括标签和输入在内的复选框.

I have checkbox set including labels and inputs.

最初，我将div用作svg上方的标签和输入的包装器，因为我想拥有avobe svg复选框.然后，我根据嵌套的数据键将数据绑定到包括标签和输入在内的复选框.

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.

有什么办法可以颠倒标签中的顺序并输入到avobe代码中? 我发现HTML属性dir = rtl和CSS输入'float:left'/标签'float:right' 但是它们产生了不希望的结果，例如将svg推到中间或在svg保持左时将输入/标签放在最右边.

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.

推荐答案

在input项目之后添加标签文本

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>

这篇关于d3复选框-标签/输入顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！