html - 与 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;
}

它没有任何效果。这是我完整的 jsfiddle。知道我做错了什么吗？

Answer 1

您遇到的问题是您将您附加<span>为<input>, 即<input><span></span></input>. 这是无效的 HTML，因为<input>s 是无效元素，因此不能有子元素（另见此处）。

相反，您可以将两个元素包装在<div>(ie <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。