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

None对它有什么影响。这是我的 full jsfiddle。知道我做错了什么吗？

Answer 1

您遇到的问题是您将 <span> 附加为 <input> 的子项，即 <input><span></span></input>。这是无效的 HTML，因为 <input> 是 void elements and therefore can't have children (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。

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

radio button in conjunction with c3 does not show text

html

d3.js

c3