업데이트시 분산 형 그래프에서 오래된 원을 제거하십시오.

Question

분산 그래프를 d3.js로 작성했습니다. 특정 사람들의 소비 습관을 그래프로 그려줍니다.

특정 사용자를 변경하고 분산 형 그래프의 원을 업데이트하는 선택 메뉴가 있습니다.

문제는 이전 서클이 업데이트시 제거되지 않는다는 것입니다. 내가 .remove() .update()를 사용하는 방법입니다

, 작업 예를

http://plnkr.co/edit/qtj1ulsVVCW2vGBvDLXO?p=info

Answer 1

먼저이 plnkr를 참조하십시오 앨런, 나는 당신이 코드를 읽을 수 있도록 몇 가지 코딩 스타일 규칙을 준수하는 것이 좋습니다. D3 예제와 라이브러리 코드 자체는 코드 가독성을 향상시키지 못하지만, 읽을 수있는 코드를 유지하는 것이 훨씬 쉽기 때문에 관심의 대상입니다. 데이터를 변경할 때

둘째, 당신은 이, 갱신 및 종료 세트를 입력으로 D3의 작동 방식을 이해할 필요가있다. 마이크 Bostock의 Thinking with Joins 좋은 시작이 될 수 있습니다. 조인의 작동 방식을 이해하지 못하면 동적 인 D3 차트를 프로그래밍 할 수 없습니다.

셋째, updateScatter의 버그가 있습니다. name.length은 귀하의 이름 변수가 value이므로 이해가되지 않습니다. 따라서 오래된 데이터를 삭제하는 것은 아닙니다.

// Update circles for the selected user chosen in the select menu. 
svg.selectAll(".markers") 
    .data(data.filter(function(d){ return d.FirstName.substring(0, name.length) === value;})) 
    .transition().duration(1000) 
    .attr("cx", function(d) { return xScale(d.timestamp); }) 
    .attr("cy", function(d) { return yScale(d.price); }); 

이상한 평등 비교는 d.FirstName.substring(0, name.length) === name입니다. 이름 데이터가 CSV 파일에 띄어 있지 않습니다. 평야 d.FirstName == name은 충분히 공평합니다. 어쨌든 후행 공백을 예상하는 경우 가격 및 날짜를 ​​강요하는 곳에서 문자열을 잘라 내면됩니다.

function updateScatter() 
{ 
    var selectedFirstName = this.value; 
    var selectedData  = data.filter(function(d) 
    { 
    return d.FirstName == selectedFirstName; 
    }); 

    yScale.domain([ 
    0, 
    d3.max(selectedData.map(function(d) 
    { 
     return d.price; 
    })) 
    ]); 

    svg.select(".y.axis") 
    .transition().duration(750) 
    .call(yAxis); 

    // create *update* set 
    var markers = svg.selectAll(".markers").data(selectedData); 

    // create new circles, *enter* set 
    markers.enter() 
    .append('circle') 
    .attr("class", 'markers') 
    .attr("cx", function(d) 
    { 
     return xScale(d.timestamp); 
    }) 
    .attr("cy", function(d) 
    { 
     return yScale(d.price); 
    }) 
    .attr('r', 5) 
    .style('fill', function(d) 
    { 
     return colour(cValue(d)); 
    }); 

    // transition *update* set 
    markers.transition().duration(1000) 
    .attr("cx", function(d) 
    { 
     return xScale(d.timestamp); 
    }) 
    .attr("cy", function(d) 
    { 
     return yScale(d.price); 
    }); 

    // remove *exit* set 
    markers.exit().remove(); 
}