5

D3を学習しようとしています。selectフォーム要素のすべてのオプションを検索し、一致する値を持つオプションを「選択済み」として指定するエレガントな方法はありますか?

var xStat = "G";

var statOptions = {
    "Points": "PTS",
    "Goals": "G",
    "Assists": "A",
    "Penalty Minutes": "PIM"
};

// create the select element
var selectUI = d3.select("#horse").append("form").append("select");

// create the options
selectUI.selectAll("option").data(d3.keys(statOptions)).enter().append("option").text(function(d) {
    return d;
});

// add values to the options
selectUI.selectAll("option").data(d3.values(statOptions)).attr("value", function(d) {
    return d;
});


// create a func to check if the value of an option equals the xStat var
// if yes, set the attribute "selected" to "selected"
var checkOption = function(e, i, a) {
    if (e[i]["value"] === xStat) {
        return e[i].attr("selected", "selected");
    }
};

// selectUI.selectAll("option").forEach(checkOption);
selectUI.selectAll("option").call(checkOption);​

ここにこれを行うための私の非動作の試みを含めました: http://jsfiddle.net/sspboyd/LzrAC/2/

ありがとう。

4

4 に答える 4

4

これはうまくいくようです：

  selectUI.property( "value", xStat );

私自身初心者で、同じ問題で手探りしていました。これが正しい方法ではない場合、何が正しいのか知りたいです。

http://jsfiddle.net/saipuck/LzrAC/9/

于 2013-08-10T22:40:45.160 に答える
3

ブレークポイントでいくつかの値をチェックした後、これを機能させる方法を見つけました。問題はコードの最後の数行にありました。改訂された（そして動作する）コードは次のとおりです。

var checkOption = function (e) {
    if(e === xStat){
        return d3.select(this).attr("selected", "selected");
    }
};

selectUI.selectAll("option").each(checkOption);

私は2つのことを間違っていました。まず、.each() の代わりに .call() を使用していました ( each/call API リファレンス)。

次に、selectUI でオプション要素を選択すると、各配列エントリの「値」を探すことでテストできるオプション html 要素の配列が得られると想定していました。コンソール (chrome に感謝) を見ると、最終的に、各オプション エントリの値を実際に取得していることがわかりました。なぜそうなのか、私にはわかりません。誰かが説明できるかどうか知りたいです。また、「this」を介してオプション要素を参照することになりましたが、それが機能する理由もわかりません。

これが他の誰かに役立つことを願っています。jsfiddle の例を現在動作するコードに更新しました。 http://jsfiddle.net/sspboyd/LzrAC/3/

スティーブン

于 2012-10-29T04:55:57.180 に答える
0

これを追加して、他の解決策が見つからなかったことを思い出してください。ありがとうスティーブン あなたのコードは私を正しい方向に導きましたが、比較する静的変数がなかったため、使用できませんでした。すなわちxStat。私の値は、最初に選択を作成するために使用されたデータセットにありました。

私はこれを使用しました。これはよりシンプルで、異なるデータセットと比較できることを意味します-エラーは見つかりませんでしたが、選択タグに追加の属性を追加します。コードは次のとおりです。

    var f = c.append("select")
        .attr("id", "dpc")
        .attr("value", function (d) { return d.Primary_CauseID })
        .style("height", "30px");

    var temp2 = f.selectAll("option").remove();

    d3.json("key_data21.aspx", function (dataset) {
    temp2.append("option")
    .data(dataset)
    .enter()
    .append("option")
    .attr("value", function (d) { return d.InsertID })
    .attr("selected", function (d) { if (d.InsertID == (f.attr("value"))) { return "selected" } })
    .text(function (d) { return d.Desc_Text });

選択したオプションの値は別のデータセット (d.Primary_CauseID) にありますが、これは静的な値である可能性もあります。これを value 属性として select タグに追加し、オプションの作成中に (f.attr("value")) を使用して select タグを読み取ります。うまくいくようです。

于 2013-01-05T14:08:51.557 に答える