D3가 잘못된 데이터를 선택하여 종료합니다.

Question

D3.js를 사용하여 실시간 그래프를 만들려고합니다. 코드는 https://plnkr.co/edit/hrawv8CTBIsJf2QWTBMb?p=preview에 있습니다.

원본 데이터는 여러 조직의 사용자 인증 결과를 나타냅니다. 각 조직에는 이름, 확인 횟수 및 실패 횟수가 있습니다. 그래프는 데이터에 따라 동적으로 업데이트되어야합니다 (루프 내 데이터 가져 오기).

코드는 https://bl.ocks.org/mbostock/3808234을 기반으로합니다.

나는 거의 확실하지 않은 몇 가지 문제가 있습니다.

// JOIN new data with old elements 
    // specify function for data matching - correct? 
    var boxes = svg.selectAll(".box").data(data, function(d) { 
    return d.inst_name; 
    }); 

    // EXIT old elements not present in new data 
    // this works somehow strange 
    // it does select all red boxes 
    boxes.exit().transition(t).remove(); 

왜()는 빨간색 막대가 아닌 모든 출구를 선택 않습니다

종료 기능은 데이터 업데이트에 따라 빨간색 막대를 선택? 이해하는 데있어 d3 문서 exit()는 새로운 데이터가없는 요소 만 선택해야합니다. 무한 루프 및 상수 데이터 파일의 경우 모든 막대를 사용해야합니까?

이것은 명백히 그래프를 상당히 파괴합니다 (plunker 참조). 더 이상 데이터 파일에서 사용할 수없는 바 만 선택하려면 나가야합니다. 아래 예를 참조하십시오.

데이터 파일

초기 상태 :

inst_name,ok,fail 
inst1,24,-1 
inst2,23,-3 
... 

업데이트 데이터 파일의 상태 : intial 상태로부터 INST2 대 (청색 및 적색 모두) 바가 제거 (의해 대체되어야

inst_name,ok,fail 
inst1,26,-1 
inst14,22,-4 
... 

inst14의 데이터)를 갱신한다. 왜 이것이 작동하지 않습니까?

새로운 데이터가 이전 색인을 사용하여 읽었습니다. 나는 inst_name 사용하는 것을 지정한 :

var boxes = svg.selectAll(".box").data(data, function(d) { 
    return d.inst_name; 
    }); 

가 필요하다고 (I 데이터를 삽입 할 때 어디에서나 사용했습니다)인가?

또한 요소를 제거하기위한 전환이 작동하지 않습니다. 문제가 무엇입니까?

나는 새로운 막대를 추가 할 때 데이터를 지정하는 것이 필요한 경우되지 확신 : 도움을

var boxes = svg.selectAll(".box").data(data, function(d) { 
    return d.inst_name; 
    }); 

    ..... 

    // add new element in new data 
    svg.selectAll(".blue") 
    .data(data, function(d) { // is this necessary ? 
     return d.inst_name; 
    }) // use function for new data matching against inst_name, necessary? 
    .enter().append("rect") 
    .transition(t) 
    .attr("class", function(d) { 
     return "blue box " 
    }) 
    .attr("x", function(d) { 
     return x(d.inst_name); 
    }) 
    .attr("width", x.bandwidth()) 
    .attr("y", function(d) { 
     return y(d.ok); 
    }) 
    .attr("height", function(d) { 
     return height - y(d.ok + min); 
    }) 

감사합니다. 이 독립적 그래프 상태 변경할 수 있도록 기본 데이터는 (이 원래 게시물 명확히 기록되지 않은) 스크립트 바뀌지

EDIT. 데이터는 증가해야합니다.

Answer 1

많은 질문을 던졌습니다.

exit()가 빨간색 막대 만 선택하고 전체를 선택하지 않는 이유는 무엇입니까? 이해하는 데있어 d3 문서 exit()는 새로운 데이터가없는 요소 만 선택해야합니다. 무한 루프 및 상수 데이터 파일의 경우 모든 막대를 사용해야합니까?

먼저 두 세트의 막대 (파란색 [확인] 및 빨간색 [실패])를 만듭니다. 데이터를 바인드 할 때 key function과 동일하게 지정하면 inst_name으로 식별됩니다. 그런 다음 데이터 업데이트를 수행하여 다음과 같이 한 번에 모든 막대를 선택합니다.

svg.selectAll(".box") 

동일한 키 기능으로 다시 데이터 바인딩을 수행 할 수 있습니다. 데이터에는 배열에 10 개의 값이 있지만 20 개의 막대 만 선택했습니다. 두 번째 10 바 출구 (붉은 것) d3에 그들은 당신의 10 개의 데이터 포인트에 있지 않기 때문에

intial 상태에서 INST2에 대한 (파란색과 빨간색 모두) 막대를 제거 (및 데이터로 대체한다 inst14). 왜 이것이 작동하지 않습니까?

나는 당신의 plunker에서 당신이 동일한 데이터를 계속해서주고 있다는 것을 알지 못합니다.

또한 요소를 제거하기위한 전환이 작동하지 않습니다. 문제가 무엇입니까?

전환 작업을 제공하지 않았습니다. 그것은 그것을 실행할 것이고, 그 다음에는 rect를 제거하십시오. 당신이 필요로하는 것은 "높이"와 같은 전환을위한 것입니다 :

boxes.exit().transition(t).attr('height', 0).remove(); 

이렇게하면 높이가 0으로 줄어 듭니다.

---

코드를 정리하려면 어떻게해야합니까?

먼저 데이터 배열의 항목과 각각 쌍을 이루는 g 요소에서 작동합니다. 그런 다음 해당 데이터 포인트에 속한 g에 두 막대를 모두 배치합니다. 좀 봐 here, 나는 당신의 코드를 정리하기 시작했습니다 (불완전하지만, 잘하면 그것은 당신을 얻습니다).