D3.js D3中的单选按钮：如何正确对齐文本并选择默认值？

我想使用数据集创建一组单选按钮，并将特定按钮标记为默认值。有两个问题：

首先，文本对齐到单选按钮的左侧，但习惯上在HTML中向右看，如下所示：

<form><label><input type="radio"...> First label<input...></label>

---

首先，要使标签/输入正确排序，应避免将输入嵌套在标签内。因此，您可以在enter键上插入div或span，然后在span内添加标签和输入，如下所示：

var labelEnter = form.selectAll("span")
    .data(shapeData)
    .enter().append("span");

labelEnter.append("input")
    .attr({
        type: "radio",
        class: "shape",
        name: "mode",
        value: function(d, i) {return i;}
    })
    .property("checked", function(d, i) { 
        return (i===j); 
    });

labelEnter.append("label").text(function(d) {return d;});

虽然这有点骗人，但我相信这是在这里做你想做的事情的唯一方法。我认为没有任何方法可以指定文本相对于D3中元素的子元素的附加位置。如果要将元素作为子元素添加，可以使用append（）vs insert（）指定是将元素追加到子元素列表的末尾，还是将元素插入到子元素列表的开头。也许为文本添加一个类似的功能（如果可能的话）将是一个值得提交给D3的请求

现在，这也解决了第二个问题，即设置“selected”元素，您希望使用d3 selection.property（）函数，该函数用于设置dom元素的非属性属性。此外，您希望使用“选中”而不是“选定”作为要设置的属性：

.property("checked", function(d, i) { 
    return (i===j); 
});

---

查看此提琴：

首先，要正确排序标签/输入，应避免将输入嵌套在标签中。因此，您可以在enter键上插入div或span，然后在span内添加标签和输入，如下所示：

var labelEnter = form.selectAll("span")
    .data(shapeData)
    .enter().append("span");

labelEnter.append("input")
    .attr({
        type: "radio",
        class: "shape",
        name: "mode",
        value: function(d, i) {return i;}
    })
    .property("checked", function(d, i) { 
        return (i===j); 
    });

labelEnter.append("label").text(function(d) {return d;});

虽然这有点骗人，但我相信这是在这里做你想做的事情的唯一方法。我认为没有任何方法可以指定文本相对于D3中元素的子元素的附加位置。如果要将元素作为子元素添加，可以使用append（）vs insert（）指定是将元素追加到子元素列表的末尾，还是将元素插入到子元素列表的开头。也许为文本添加一个类似的功能（如果可能的话）将是一个值得提交给D3的请求

现在，这也解决了第二个问题，即设置“selected”元素，您希望使用d3 selection.property（）函数，该函数用于设置dom元素的非属性属性。此外，您希望使用“选中”而不是“选定”作为要设置的属性：

.property("checked", function(d, i) { 
    return (i===j); 
});

看看这个提琴：

一个避免使用跨度的提琴，一步到位，使用D3的insert而不是append

labels = form.selectAll("label")
    .data(shapeData)
    .enter()
  .append("label")
    .text(function(d) {return d;})
  .insert("input")
    .attr({
        type: "radio",
        class: "shape",
        name: "mode",
        value: function(d, i) {return i;}
    })
    .property("checked", function(d, i) {return i===j;});

一种避免使用span的方法，一步完成，使用D3的insert而不是append

labels = form.selectAll("label")
    .data(shapeData)
    .enter()
  .append("label")
    .text(function(d) {return d;})
  .insert("input")
    .attr({
        type: "radio",
        class: "shape",
        name: "mode",
        value: function(d, i) {return i;}
    })
    .property("checked", function(d, i) {return i===j;});

---

非常感谢-我感谢您对span的思考，感谢您向我介绍selection.property。我一直在使用“选中”而不是“选中”，但我正在进行各种排列，看看是否能让它工作！非常感谢-我感谢您对span的思考，感谢您向我介绍selection.property。我一直在使用“选中”而不是“选中”，但我正在进行各种排列，看看是否能让它工作！通过使用float:left设置输入样式（“input[type=radio]”），可以使输入显示在文本的左侧；在css中，您可以通过使用float:left设置输入样式（“input[type=radio]”），使输入显示在文本的左侧；在css中。