d3 v4 + reagieren + es6 + crossfilter: Selection.exit(). Remove() funktioniert nicht

Question

Ich verwende crossfilter.js und d3.js v4 mit ES6-Stil Reagieren in einem Versuch, dimensionale Diagramme mit Kontext-putzen zu machen. Im Wesentlichen nahm ich this example und konvertierte es zu ES6.

Das Problem, das ich habe, ist selection.exit().remove() funktioniert nicht so, dass auf jedem Neuzeichnen, mehr und mehr Kreise an die Svg g-Element angefügt werden. Neuzeichnungen werden ausgelöst, wenn ein Pinsel erstellt wird. Ich überprüfte

selection.exit() 
    .attr('class', d => { 
    console.log('anything'); 
    return 'anything'; 
    }) 
    .remove(); 

aber nichts wurde ausgegeben, also denke ich, dass meine Datenauswahl nicht gültig ist.

Hier ist der Kontext:

componentDidMount() { 
    const el = ReactDOM.findDOMNode(this); // the mounted svg element 

    const svg = d3.select(el) 
    .attr('width', 300) 
    .attr('height', 500); 

    const g = svg.append('g') 
    .attr('transform', 'translate(32,32)'); 

    let circles = g.append('g') 
    .selectAll('circle'); 

    const brushGroup = g.append('g') 
    .attr('class', 'brush') 
    .call(brush); 

    function redraw() { 
    const all = group.all(); // crossfilter group returns an array 

    xAxisGroup.call(xAxis); 
    yAxisGroup.call(yAxis); 

    circles = circles.data(all, d => d); // keyFn for data constancy 

    circles.enter().append('circle') 
     .attr('r', radius) 
     .attr('cx', plotX) // radius + plotX/Y are simple curry functions 
     .attr('cy', plotY); 

    circles.exit().remove(); // not working!! 
    } 

    redraw(); 
} 

ich auch von dieser Änderung in v4 in d3-selection bewusst bin, aber ich bin nicht super sicher, welche Linien sind meine update und welche meine update + enter sind.

Jede Hilfe würde sehr geschätzt werden. Vielen Dank!

Answer 1

Ich vermute, das Problem ist eines von 2 Dingen. Wahrscheinlich # 1 unten. Es ist ein bisschen schwer mit ein funktionierendes Beispiel zu sagen, die Dinge in testen, aber hier geht:

1. Ich glaube, dass die selectAll und die data sollten zusammen in der redraw Funktion geschehen verbinden. Da Sie die selectAll in der Neuzeichnungsfunktion nie wiederholen, enthält Ihre Auswahl niemals Elemente. Wenn Sie Ihre enter und 10 Auswahlen in Ihrer redraw Funktion überprüfen, enthält Ihre enter Auswahl immer alle Ihre Datenpunkte, da die zugrunde liegende Auswahl leer ist.

2. Das Ihre Datenschlüsselfunktion gibt ein Objekt zurück. Da das Objekt das Ergebnis von Crossfilters group.all ist, sollten sie durch Bezugnahme vergleichbar sein, aber es wäre sicherer, circles.data(all, d => d.key) zu tun.

Die Lösung sollte so etwas zu tun:

componentDidMount() { 
    const el = ReactDOM.findDOMNode(this); // the mounted svg element 

    const svg = d3.select(el) 
    .attr('width', 300) 
    .attr('height', 500); 

    const g = svg.append('g') 
    .attr('transform', 'translate(32,32)'); 

    let circlesGroup = g.append('g'); // Just hang on to the group 

    const brushGroup = g.append('g') 
    .attr('class', 'brush') 
    .call(brush); 

    function redraw() { 
    const all = group.all(); // crossfilter group returns an array 

    xAxisGroup.call(xAxis); 
    yAxisGroup.call(yAxis); 

    let circles = circlesGroup // Do the selection and data join here 
     .selectAll('circle') 
     .data(all, d => d.key); // Have the key function return a key, not an object 

    circles.enter().append('circle') 
     .attr('r', radius) 
     .attr('cx', plotX) // radius + plotX/Y are simple curry functions 
     .attr('cy', plotY); 

    circles.exit().remove(); 
    } 

    redraw(); 
}