Laci Laci - 1 year ago 167
Javascript Question

D3.js redraw chart after brushing

I am working on a D3.js chart where I would like to brush on a timeline. I stucked when I want to redraw the chart with the new data.

┬┤function brushed() {

var startDate=new Date(brush.extent()[0]);
var endDate=new Date(brush.extent()[1]);

var newDates=[];

var i=0;


My problem is that after I change the data on the element the whole graph disappear. I am pretty rookie in D3.js and dont really know if this is the best way to achive this functionality.

I appreciate any suggestion.


Thanks in advance!

xli xli
Answer Source

You need to redraw the main graph line and axes in brushed.

Modified CodePen

Save a reference to the graph line's path:

var path = series.append('path')
    .attr('vector-effect', 'non-scaling-stroke')


In brushed, redraw:

path.attr('d', pathGenerator(dates));

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download