Comment configurer l'extension de la brosse dans d3 js tout en utilisant l'échelle de temps?

Question

J'ai un problème avec le brossage en utilisant brush.extent ([val1, val2])

En ce qui concerne la documentation: https://github.com/mbostock/d3/wiki/SVG-Controls quand je mis en place brush.extent ([val1, val2]) comme ceci:

var xScale = d3.scale.linear() 
    .domain(data) 
    .range([0, 500]); 

var brush = d3.svg.brush() 
    .x(xScale) 
    .on('brushstart', function() { 
     this.brushStart(); 
    }) 
    .on('brushend', function() { 
     this.brushEnd(); 
    }) 
    .extent([100, 300]); 

Il affichera la zone balayée de 100 à 200 sur xAxis (brosse est visible et sur la bonne position).

Malheureusement, quand j'utilise d3.time.scale() il ne fonctionne pas du tout:

var xScale = d3.time.scale() 
    .domain(data) 
    .range([0, 500]); 

var brush = d3.svg.brush() 
    .x(xScale) 
    .on('brushstart', function() { 
     this.brushStart(); 
    }) 
    .on('brushend', function() { 
     this.brushEnd(); 
    }) 
    .extent([100, 300]); 
    // or 
    // .extent(['2013-08-01T00:00:00Z', '2013-08-10T23:59:59Z']); 
    // or 
    // .extent(['2013-08-01 00:00:00', '2013-08-10 23:59:59']); 
    // or even 
    // .extent([new Date(2013, 8, 1, 00, 00, 00), new Date(2013, 8, 10, 23, 59, 59)]); 

Il ne présente pas la zone brossé.

Comment régler la zone brossée lorsque j'utilise d3.time.scale()?

Bien sûr, les données contiennent des plages de dates qui peuvent être balayées même avec des marges.

Mariusz

Answer 1

J'ai trouvé le problème et la solution.

J'utilise la fonction:

var parseDate = d3.time.format('%Y-%m-%d %H:%M:%S').parse; 

Pour traiter toutes les valeurs de données, qui sont originales au format aaaa-mm-jj hh: mm: ss

Bien que mis en place brush.extent ([ val1, val2]) Je dois utiliser la fonction même parseDate():

brush.extent([parseDate(val1), parseDate[val2]]); 

Mariusz