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'/标签'float：right' 但是它们产生了不希望的结果，例如将svg推到中间或在svg保持左时将输入/标签放在最右边。

Answer 1

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

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

在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>

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

2 个答案: