D3中的單選按鈕：如何正確對齊文本並選擇默認值？

Question

我想使用數據集來創建一組單選按鈕並將其標記爲默認值。這裏有兩個問題：

首先，文本對齊單選按鈕的左邊，但習慣上看到它的權利，在HTML這樣的：

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

我試着在設置了輸入標籤後，使用標籤集合上的D3來放置標籤文本，但是這似乎會覆蓋輸入標籤。

其次，默認按鈕僅以非限定屬性名稱「checked」或「selected」表示。我已經在代碼的最後一行嘗試了這一點，但它似乎不起作用。

這是現在的代碼，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或者跨越上輸入，然後添加標籤和輸入的範圍內，像這樣：

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

看看這個小提琴：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;});