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

Question

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

首先，文本对齐到单选按钮的左侧，但习惯上是向右看，在 HTML 中是这样的：

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

我尝试在标签集合上使用 D3 在设置输入标签后放置标签文本，但这似乎覆盖了输入标签。

其次，默认按钮仅用一个不合格的属性名称表示，“选中”或“选中”。我已经在最后一行代码中尝试过，但它似乎不起作用。

这是现在的代码，associated JSFiddle。

var shapeData = ["Arrow", "Cross", "Hexagon", "Star", "Triangle"], 
    j = 3;  // Choose the star as default

// Create the shape selectors
var form = d3.select("body").append("form");

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

Answer 1

首先，要正确排序标签/输入，您应该避免将输入嵌套在标签内。因此，您可以在输入时插入 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() 与 insert() 来指定是追加到子列表的末尾还是插入开头。也许为文本添加类似的功能（如果可能的话）将是一个值得提交给 D3 的拉取请求。

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

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

看看这个小提琴：http://jsfiddle.net/reblace/YyuY4/9/

Answer 2

simpler version 避免使用跨度，因此一步完成，使用 D3 的插入而不是附加。

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;});