d3.js с использованием brush.clear() не работает для меня

Question

В объекте я храню линейный график, созданный с помощью d3.js, который имеет возможность чистить выделенную область.

Выбранная область удаляется, когда я щелкаю за пределами выбранной части линейного графика.

Я хочу удалить выбранную область, нажав на внешнюю ссылку, например. [сброс]

К сожалению, даже если я получаю доступ к объекту кисти из объекта линейного графика, вызов функции clear() для объекта кисти не удаляет выделение.

Как я могу удалить выделение кисти, используя внешнюю ссылку из внешнего графика?

Я создаю кисть:

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() неэффективна.

Изображение почищенной области:

http://i39.tinypic.com/2uxzprp.jpg

Нажатие рядом с розовой областью работает, нажатие на ссылку [сбросить] не работает.

Мариуш

Answer 1

Из документов,

Обратите внимание, что это автоматически не перерисовывает кисть и не отправляет события слушателям. Чтобы перерисовать кисть, вызовите кисть выделения или перехода; для отправки событий используйте 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>

Answer 2

brush.clear();
svg.selectAll('.brush').call(brush);

Вторая строка - перерисовать кисть.

Answer 3

brush.clear() только сбрасывает степень. Вам нужно позвонить brush снова перерисовать кисть. Документация для brush.extent содержит некоторые подробности об этом.

Answer 4

Вы также можете позвонить brush.event()чтобы убедиться, что ваши слушатели уволены. В d3.v3 это выглядело бы так:

this.brushArea.call( this.brush.clear());
this.brush.event(this.brushArea);