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

我在这里做了一些改变。首先，将<meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video" content="https://www.neocsatblog.info/jwplayer/player.swf?file=https%3A%2F%2Fwww.neocsatblog.info%2Fwp-content%2Fuploads%2F2016%2F02%2FQNA.mp4&autostart=true&skinURL=http://neocsatblog.info/skinning-sdk/five/newtube/newtube.xml" />和rect包装在g中，这样您只需要进行一次数据绑定。然后你可以自由地将它们转换到一起：

text

更新了fiddle。

<强> EDITS

要转换文本，您可能需要使用custom tween function：

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。

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

如何在d3中动态更新文本标签？

3 个答案: