与c3一起使用的单选按钮不显示文本

Question

我正在创建一个自定义图例，其中包含使用c3创建的饼图的无线电输入。 我通过D3 API创建无线电输入。 我还没有能够在收音机输入端显示文字。

d3.select('.container').insert('div', '.chart')
   .selectAll('input')
   .data(['data', 'data10', 'data5'])
   .enter().append('input')    
   .attr('type', function (id) { return 'radio'; })
   .attr('name', function (id) { return id;})
   .attr('value', function (id) { return id;})
   .append('span')
   .html(function (id) { return id; });

这是css：

input{
    width:31.5%;    
}
input span{    
    color:red;
    background-color: green;
}

没有任何效果。这是我的full jsfiddle。 知道我做错了吗？

Answer 1

您遇到的问题是，您<span>要追加<input>的孩子，即<input><span></span></input>。这是无效的HTML，因为<input>是void elements，因此无法生成孩子（also see here）。

相反，您可以将这两个元素包装在<div>（即<div><input></input><span><span></div>）中，如下所示：

// Append a div for each different data type
var divs = d3.select('.container')
    .insert('div', '.chart')
    .selectAll('input')
    .data(['data', 'data10', 'data5'])
    .enter().append('div');

// Add a child input to each div
divs.append("input")
    .attr('type', function (id) { return 'radio'; })
    .attr('name', function (id) { return id;})
    .attr('value', function (id) { return id;})

// Add a child span to each div
divs.append('span')
     .html(function (id) { return id; })

看起来像这样：

更新了JSFiddle here。