radio button in conjunction with c3 does not show text

Question

I am creating a custom legend, that contains radio inputs, of a pie chart created with c3. I create radio inputs via D3 API. I haven't been able to show the text on the side of radio input.

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

Here is the css:

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

None of it has any effect. Here is my full jsfiddle. Any idea what I am doing wrong?

Answer 1

The issue you're having is you're appending your <span> to be a child of the <input>, i.e. <input><span></span></input>. This is invalid HTML, as <input>s are void elements and therefore can't have children (also see here).

Instead, you can wrap both elements in a <div> (i.e. <div><input></input><span><span></div>) like so:

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

which looks like this:

Updated JSFiddle here.