2

D3 フォース レイアウトを使用し、コードを追加して、ユーザーが個々のノードを選択できるようにします (ここでは、select は D3 select() とは関係ありませんが、ユーザーの観点からノードの強調表示された状態を示します)。一度に選択できるノードは 1 つだけです。そのため、ユーザーが選択されていないノードをクリックすると、選択したノードの選択を解除したいと考えています。

ノードで選択した属性を使用していますが、D3 data(...) または datum(...) メソッドを使用して設定するのに苦労しています。実際、私はそれをそのように機能させることができませんでした。私が今持っているものはちょっとぎこちないように見えるので、もっときれいな方法があることを願っています。

function deselectAll() {
    var sc = d3.selectAll("circle")
        .filter(function(d) {return (d.selected == "y")});

    var circles = sc.data();

    sc.transition()
        .duration(50)
        .style("stroke-width", "1px")
        .style("stroke", "#3182bd");

    if(null != circles && circles.length > 0) {
        for(i=0; i<circles.length; i++) {
            circles[i].selected = "n";
        }
    }
}

問題は、チェーンに .data("n") を追加しても、「選択済み」が「n」に設定されないことです。d3チェーンの一部としてそれを行うことは可能ですか?

4

1 に答える 1

2

d3 の多くの選択 (または遷移) 関数は、現在のデータを各ノードから定義済みの関数に渡します。このデータムの内容はいつでも変更できます。

あなたの例を使用して、「y」から「n」までのノードを設定したい場合は、次のd.selected == "y"ようにフィルタリングされた選択を使用できます。

sc.each(function(d) {
    d.selected = "n";
});

この関数は、選択範囲内のノードごとに 1 回呼び出されます (フィルターに従って選択されたノードにはそれぞれ "y" があります)。そのため、データムのプロパティ値を簡単に変更できます。

于 2013-09-23T20:10:13.710 に答える