2

データセットを使用して一連のラジオ ボタンを作成し、特定のボタンをデフォルトとしてマークしたいと考えています。2 つの問題があります。

まず、テキストはラジオ ボタンの左側に配置されますが、HTML では次のように右側に表示されるのが通例です。

<form><label><input type="radio"...> First label<input...></label>

入力タグを設定した後、ラベル コレクションで D3 を使用してラベル テキストを配置しようとしましたが、これは入力タグを上書きしているように見えます。

次に、デフォルトのボタンは、「checked」または「selected」という修飾されていない属性名だけで示されます。コードの最後の行でこれを試しましたが、うまくいかないようです。

これは現在のコードであり、関連する JSFiddleがあります。

var shapeData = ["Arrow", "Cross", "Hexagon", "Star", "Triangle"], 
    j = 3;  // Choose the star as default

// Create the shape selectors
var form = d3.select("body").append("form");

labels = form.selectAll("label")
    .data(shapeData)
    .enter()
    .append("label")
    .text(function(d) {return d;})
    .append("input")
    .attr({
        type: "radio",
        class: "shape",
        name: "mode",
        value: function(d, i) {return i;}
    })
    .attr(function(d, i) {return i==j?"selected":null;});
4

2 に答える 2

2

スパンの使用を回避する単純なバージョンでは、追加の代わりに D3 の挿入を使用して、1 つのステップでスパンを使用します。

labels = form.selectAll("label")
    .data(shapeData)
    .enter()
  .append("label")
    .text(function(d) {return d;})
  .insert("input")
    .attr({
        type: "radio",
        class: "shape",
        name: "mode",
        value: function(d, i) {return i;}
    })
    .property("checked", function(d, i) {return i===j;});
于 2013-10-17T09:10:24.240 に答える