d3에서 텍스트가 수반되는 막대 차트를 업데이트하는 방법은 무엇입니까?

debugcn 에 게시 Dev

스 팩터

d3에서 더 큰 데이터 시각화의 일부로 막대 차트를 만들고 있습니다. 시각화의 한 부분에서 데이터를 변경할 수 있기를 원하며 모든 차트가 업데이트됩니다. 차트의 단순화 된 버전은 다음과 같습니다.

var dataset = [1, 3, 5, 3, 3];

...
var svg = d3.select("body #container").append("svg")
        .attr("width", width)
        .attr("height", height);

    var g = svg.append("g");
...

이 svg 요소를 사용하여지도, 원 등과 같은 다른 차트를 만듭니다. 막대 차트는 이와 같이 구현됩니다.

 function bars(dataset) {
      var barChart = g.selectAll("rect.bar")
        .data(dataset)
        .enter();

      barChart.append("rect")
        .attr("class", "bar")
        .attr("x", function(d, i) { return i * 30 + 100; })
        .attr("y", function(d) { return (height - 130) - d * 4;})
        .attr("width", 25)
        .attr("height", function(d) { return d * 4; });


       barChart.append("text")
        .text(function(d) { return d; })
        .attr("x", function(d, i) { return i * 30 + 103; })
        .attr("y", function(d) { return (height - 130) - d/10 - 5;})
        .attr("font-family", "sans-serif")
        .attr("font-size", "10px")
        .attr("fill", "darkgray"); 
}

이제 이것은 막대 차트를 잘 렌더링하지만 기능이 있습니다.

...
.on("click", function() {
   ...
   var newdata = [5, 2, 6, 2, 4]; // new values
   g.selectAll("rect.bar").remove();  // This removes the bars
   g.selectAll("text").remove();    // Problem here: All texts are removed
   bars(newdata);
}

.remove () 함수를 사용하여 새로운 값으로 막대 차트를 전환하려고했습니다. 이것은 다른 막대 차트가 없기 때문에 막대 직사각형에서 작동하지만 위에 표시된 것처럼 값 레이블을 제거하려고 할 때 다른 모든 텍스트 요소도 제거되었습니다. 막대와 관련된 텍스트 만 업데이트하는 방법이 있습니까?

리차드 웨스턴 라

텍스트에 클래스를 적용하고 제거 할 클래스 만 선택해 보셨습니까? 예 :

barChart.append("text")
  .attr('class','label')
  .text(function(d) { return d; })

그때

g.selectAll(".label").remove();

덧붙여, 모든 요소의 경우 대신 모든 요소를 제거하는 다음, 사용 간주해야, 업데이트 사이에 삭제되는 enter()및 exit()기존 요소에 새 데이터를 바인딩 만 변경하는 요소를 제거하기 위해?

다음 과 같이 편집 하십시오.

function bars(dataset) {
  var bar = g.selectAll(".bar").data(dataset);

  bar.exit().remove();

  bar.enter().append("rect").attr("class", "bar");

  bar
    .attr("x", function(d, i) { return i * 30 + 100; })
    .attr("y", function(d) { return (height - 130) - d * 4;})
    .attr("width", 25)
    .attr("height", function(d) { return d * 4; });

  var label = g.selectAll(".label").data(dataset);

  label.exit().remove();

  label.enter().append("text").attr("class", "label");

  label
    .text(function(d) { return d; })
    .attr("x", function(d, i) { return i * 30 + 103; })
    .attr("y", function(d) { return (height - 130) - d/10 - 5;})
    .attr("font-family", "sans-serif")
    .attr("font-size", "10px")
    .attr("fill", "darkgray"); 
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사