라디오 버튼이 c3과 함께 표시되지 않습니다.

Question

라디오 입력과 c3으로 만든 원형 차트가 포함 된 사용자 정의 범례를 만듭니다. D3 API를 통해 라디오 입력을 만듭니다. 라디오 입력쪽에 텍스트를 표시하지 못했습니다. 그

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

중에 어떠한 영향을 미치지 않는다 : 여기

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이다. 여기 내 full jsfiddle입니다. 내가 뭘 잘못하고 있는지 알기!

Answer 1

<span>이 (가) <input>의 어린이 (예 : <input><span></span></input>)로 추가됩니다. <input>이 void elements이고 따라서 이 (가) (also see here) 어린이를 가질 수 없기 때문에 잘못된 HTML입니다.

대신, 당신은 너무 같은 <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 업데이트되었습니다.