如何動態更新d3中的文本標籤？

Question

我想添加標籤到我的垂直條形圖中，顯示與條形當前高度對應的當前百分比值。 所以我需要不斷更新百分比值，並且還需要進行轉換以使文本元素與條形圖同步移動。 我嘗試這樣做：

var percentageLabels = svg.selectAll(".percentage-label") 
    .data(dataset); 

    percentageLabels.remove(); 

    percentageLabels 
    .enter() 
    .append("text") 
      .attr("class", "percentage-label") 
      .style("fill", "white") 
    .text(function(d) { 
     return d; 
    }) 
    .attr("y", function(d) { 
     return y(d); 
    }) 
    .attr("x", function(d, i) { 
     return i * (w/dataset.length) + 2.5/100 * w + w * 10/100; 
    }) 
    .transition().duration(1750).ease("linear") 
    .attr("y", function(d) { 
        return y(d); 
    }); 

檢查出fiddle

Answer 1

我想在這裏做一些修改。首先，將rect和text換成g，所以你只需要一次數據綁定。然後，你可以自由地轉換他們一起：

var uSel = svg.selectAll(".input") 
    .data(dataset); //<-- selection of gs 

uSel.exit().remove(); //<-- anybody leaving? remove g (both rect and text) 

var gs = uSel 
    .enter() 
    .append("g") 
    .attr("class", "input"); //<-- enter selection, append g 

gs.append("rect") 
    .attr("fill", "rgb(250, 128, 114)"); //<-- enter selection, rect to g 

gs.append("text") 
    .attr("class", "percentage-label") 
    .style("fill", "white") 
    .attr("x", function(d, i) { 
     return i * (w/dataset.length) + 2.5/100 * w + w * 10/100; 
    }); //<-- enter selection, text to g 

uSel.select("rect") 
    .attr("x", function(d, i) { 
     return i * (w/dataset.length) + 2.5/100 * w; 
    }) 
    .attr("width", w/dataset.length - barPadding) 
    .attr("height", y(0)) 
    .transition().duration(1750).ease("linear") 
    .attr("y", function(d) { 
     return y(d); 
    }) 
    .attr("height", function(d) { 
     return h - y(d); 
    }); //<-- update rects with transition 

uSel.select("text") 
      .transition().duration(1750).ease("linear") 
      .attr("y", function(d) { 
        return y(d); 
      }) 
    .text(function(d) { 
     return d + "%"; 
    }); //<-- update text with transition 

---

更新fiddle。

---

編輯

過渡的文字，你可能將不得不使用custom tween function：

uSel.select("text") 
    .transition().duration(1750).ease("linear") 
    .attr("y", function(d) { 
     return y(d); //<-- move the text 
    }) 
    .tween("", function(d) { 
     var self = d3.select(this), 
      oldValue = y.invert(self.attr("y")), //<-- get the current value 
      i = d3.interpolateRound(oldValue, d); //<-- interpolate to new value   
     return function(t) { 
     self.text(i(t) + '%') <-- update the text on each iteration 
     }; 
    });  

更新，更新fiddle。

Answer 2

從文檔：

的transition.each方法可用於鏈轉移和跨一組轉換的應用共享定時。例如：

d3.transition() 
    .duration(750) 
    .ease("linear") 
    .each(function() { 
     d3.selectAll(".foo").transition() 
     .style("opacity", 0) 
     .remove(); 
    }) 
    .transition() 
    .each(function() { 
     d3.selectAll(".bar").transition() 
     .style("opacity", 0) 
     .remove(); 
    }); 

Answer 3

你可能想看看這個：https://github.com/mbostock/d3/wiki/Transitions#tween