radio button in conjunction with c3 does not show text

Refresh	March 2019
Views	101 time

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?

Tech Wizard

1 answers

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:

screenshot

Updated JSFiddle here.

mdml

Related Issues

Last questions

Hot tags

javascript java c# python android php jquery c++ html ios css sql mysql .net c r asp.net ruby-on-rails objective-c arrays node.js sql-server iphone regex ruby angularjs json swift django linux asp.net-mvc xml wpf angular spring string ajax python-3.x git excel windows xcode multithreading pandas database reactjs bash scala algorithm eclipse html5 vba performance macos postgresql mongodb laravel oracle visual-studio list vb.net wordpress linq entity-framework winforms unit-testing matlab typescript image python-2.7 perl twitter-bootstrap numpy css3 qt swing hibernate c++11 shell apache amazon-web-services haskell maven forms azure facebook powershell rest function excel-vba delphi tsql ruby-on-rails-3 symfony google-chrome firebase api docker dataframe oop