5

オブジェクトに、d3.js で作成された折れ線グラフを保存します。これは、選択した領域をブラシ処理する可能性があります。

折れ線グラフの選択した部分の外側をクリックすると、選択した領域が削除されます。

外部リンクをクリックして選択した領域を削除したいと思います。【リセット】

残念ながら、オブジェクトを呼び出す折れ線グラフ オブジェクトからブラシ オブジェクトにアクセスしても、選択は削除clear()されbrushません。

折れ線グラフの外側から外部リンクを使用してブラシの選択を削除するにはどうすればよいですか?

ブラシを作成します：

this.brush = d3.svg.brush()
    .x(xScale)
    .on('brushstart', function() {
        lineChart.brushStart();
    })
    .on('brushend', function() {
        lineChart.brushEnd();
    });

ブラッシング エリアを作成します。

this.brushArea = svg.append('svg:g')
    .attr('class', 'brush')
    .call(this.brush)
    .selectAll('rect')
    .attr('height', this.height);

外部リンクで私はclear()コマンドを入れました：

<span onclick="javascript: lineChart.brush.clear();">[reset]</span>

折れ線グラフから選択を削除しません。

助けてください。

についての文書brush.clear()化は効率的ではありません。

4

4 に答える 4

10

ドキュメントから、

これにより、ブラシが自動的に再描画されたり、イベントがリスナーにディスパッチされたりすることはありません。ブラシを再描画するには、選択範囲またはトランジションでブラシを呼び出します。イベントをディスパッチするには、brush.event を使用します。

これを実現するには、最初にブラシをクリアしてから再描画します。

d3.selectAll(".brush").call(brush.clear());

これにより、最初にブラシがクリアされ、ページ上のすべてのブラシが再描画されます。

clear()ただし、親コンテナーとの関連で選択を行うことを常にお勧めします。例えば：

d3.selectAll(".brush-container .brush").call(brush.clear());

使用例は、ページに複数のブラシがある場合です。

質問に具体的に答えるために、次のような関数を呼び出すことができます

var d3Brush = this.brush;

function clearBrush(){
  d3.selectAll("g.brush").call(d3Brush.clear());
}

そして電話する

<span onclick="javascript: clearBrush();">[reset]</span>
于 2013-12-03T07:41:44.660 に答える