使用d3的单选按钮不是水平对齐的

Question

我正在尝试在d3代码中使用以下代码用于单选按钮：

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

然而，单选按钮正在垂直对齐。即彼此重叠。请让我知道我错过了什么让它们水平对齐。