d3.js utilisant brush.clear() ne fonctionne pas pour moi

Question

Dans un objet je stocke le graphique en ligne fait avec d3.js, qui ont la possibilité de brosser la zone sélectionnée.

La zone sélectionnée est supprimée lorsque je clique à l'extérieur de la partie sélectionnée du graphique linéaire.

Je voudrais supprimer la zone sélectionnée en cliquant sur lien externe par exemple. [reset]

Malheureusement, même si j'accède à l'objet pinceau à partir de l'objet de graphique en ligne appelant clear() sur l'objet pinceau ne supprime pas la sélection.

Comment est-ce que je peux enlever la sélection de brosse en utilisant le lien externe du diagramme de ligne extérieur?

Je crée une brosse:

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

je crée la zone de brossage:

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

Le lien externe, je mets commande clear():

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

Il ne supprime pas la sélection à partir du graphique linéaire.

S'il vous plaît aider.

La documentation sur brush.clear() n'est pas efficace.

image de la zone brossé:

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

à côté de la zone rose Clicking travaille, en cliquant sur le lien [reset] ne fonctionne pas.

Mariusz

Answer 1

brush.clear() remet à zéro seulement dans la mesure. Vous devez appeler à nouveau brush pour redessiner le pinceau. La documentation pour brush.extent a quelques détails à ce sujet.

Answer 2

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

La deuxième ligne est de redessiner le pinceau.

Answer 3

De l'docs,

Notez que cela ne redessine pas automatiquement la brosse ou envoyer son événements aux auditeurs. Pour redessiner le pinceau, appelez le pinceau sur une sélection ou la transition ; Pour distribuer les événements, utilisez brush.event.

Vous pouvez y parvenir en nettoyant d'abord la brosse puis en la redessinant.

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

Cette première efface la brosse et redessine tous les pinceaux sur votre page.

Bien que, je recommande toujours de faire clear() sur les sélections en contexte avec leurs conteneurs parents.Par exemple:

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

Le cas d'utilisation est lorsque vous avez plusieurs pinceaux sur votre page.

Maintenant, pour répondre précisément à votre question, vous pouvez appeler une fonction comme celui-ci

var d3Brush = this.brush; 

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

Et appelez

<span onclick="javascript: clearBrush();">[reset]</span>