19

いくつかの行があり、凡例の「ドット」をクリックすると表示/非表示になることがわかっています。

ただし、一部の行を無効にして表示しない状態から始める必要があり、ユーザーは凡例のドットをクリックしてグラフに表示する必要があります。

(例: 言語ごとの stackoverflow に関する質問の数をグラフにしますが、C、PHP、および JavaScript はデフォルトで無効になっています)。グラフには python、ruby のみが表示されますが、凡例では、C、PHP、js を含むすべての言語が表示され、これら 3 つが無効になっています。

デフォルトの表示/非表示ステータスを設定するための各データ シリーズのメソッド/属性が見つかりません。何か不足していますか？

4

4 に答える 4

24

この回答を読んだ後、グラフの JSON データストリームからストリームを無効に設定する方法を理解するために、さらに読む必要がありました。

以下の例は、私が無効になったためにそれを解決したものです: true

    {
    key: "something",
    disabled: true,
    values: [...]
    }
于 2014-02-10T18:28:52.847 に答える
14

オブジェクトを使用して、有効/無効にするストリームを変更できchart.state()ます。例えば：

// Assuming your chart is called 'chart'
var state = chart.state();

for(var i=0; i < state.disabled.length; i++) {
  state.disabled[i] = ...LOGIC RETURNING TRUE OR FALSE...;
}

chart.dispatch.changeState(state);
chart.update();
于 2013-07-10T05:41:45.070 に答える
9

無効にするデータ系列ごとに、次のようにします。

series.disabled=true

nvd3 はすべてを行うわけではありませんが、コードを精読する気があれば、実際には非常に柔軟です。これを発見したのは、いくつかのチャート モデルのソースで次の行を見つけたときです。

state.disabled = data.map(function(d) { return !!d.disabled });
于 2013-06-13T02:29:04.860 に答える
1

非表示のチャートから始めて、次のようなことを試すことができます。

// Array of series you want to hide
var hidden = [0, 2];

// Dispatch click event to each element
var e = document.createEvent('UIEvents');
e.initUIEvent('click', true, true);
d3.select('.nv-legend')
  .selectAll('.nv-series')
  .filter(function(d, i){return hidden.indexOf(i) !== -1;})
  .node()
  .dispatchEvent(e);

これが完了したら、グラフを再表示すると、シリーズが無効になります。

于 2013-06-06T18:10:01.487 に答える