d3 v4 + react + es6 + crossfilter : Selection.exit(). remove() not working

Question

컨텍스트 브러시로 차원 차트를 만들려고 시도 할 때및 d3.js v4을 ES6 스타일 React와 함께 사용하고 있습니다. 기본적으로 this example을 가져 와서 ES6으로 변환했습니다.

내가 가진 문제는 selection.exit().remove()이므로 각 그리기에서 더 많은 원이 svg g 요소에 추가됩니다. 브러시를 만들 때 다시 그리기가 트리거됩니다. 나는 실행하여 점검했다

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

그러나 아무 것도 출력되지 않았으므로 나의 데이터 선택이 유효하지 않다고 생각하고있다. 여기

컨텍스트입니다 :

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(); 
} 

내가 V4에서 d3-selection의 변화를 알고도 모르지만, 나는 슈퍼있는 줄 확신 아니에요 내 update 내 update + enter을있는 것.

도움을 주시면 감사하겠습니다. 고맙습니다!

Answer 1

문제가 2 가지 중 하나라고 생각됩니다. 아마 아래 # 1. 그것은 사물을 테스트하는 작업 예를 밖으로 말할 수 열심히 조금,하지만 여기 당신은 간다 :

1. 은 내가 selectAll과 data가 redraw 기능에서 함께 일해야 가입 있다고 생각합니다. 다시 그리기 기능에서 selectAll을 다시 실행하지 않으므로 선택한 항목에는 절대로 요소가 포함되지 않습니다. redraw 함수에서 enter 및 exit 선택 항목을 확인하면 기본 선택 항목이 비어 있기 때문에 enter 선택 항목에는 항상 모든 데이터 요소가 포함됩니다.

2. 귀하의 데이터 키 기능이 개체를 반환합니다. 개체가 Crossfilter의 결과 인 이기 때문에 참조로 비교할 수 있지만 circles.data(all, d => d.key)을 수행하는 것이 더 안전합니다.

이 솔루션은 그런 짓을하는 것 :

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(); 
}