1

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です。私が間違っていることは何ですか？

4

1 に答える 1

2

<span>あなたが抱えている問題は、の子になるようにあなたを<input>追加していることです<input><span></span></input>。これは無効な HTML です。<input>s はvoid 要素であるため、子を持つことはできません(こちらも参照してください)。

<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 を更新しました。

于 2015-01-30T17:19:18.063 に答える