D3.js 如何将文本转换应用于d3中的数字

我是d3新手。我创建了一个条形图。在带有动画的条形图中添加文本和百分比。绘制条形图时，数字和百分比从下到上到达所需位置。这是密码

svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "g rect")
    .append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.label); })
    .attr("y", h)
    .on("mouseover", onMouseOver) //Add listener for the mouseover event
    ... // attach other events
    .transition()
    .ease(d3.easeLinear)
    .duration(2000)
    .delay(function (d, i) {
        return i * 50;
    })
    .attr("y", function(d) { return y(d.percentage.slice(0, -1)); })
    .attr("width", x.bandwidth() - 15)  // v4’s console.log(bands.bandwidth()) replaced v3’s console.log(bands.rangeband()).
    .attr("height", function(d) { return h - y(d.percentage.slice(0, -1)); })   // use .slice to remove percentage sign at the end of number
    .attr("fill", function(d) { return d.color; });

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

    svg.selectAll(".g.rect").append("text")
        .text(function(d) { return d.value })
        .attr("x", function(d) { return x(d.label) + x.bandwidth() / 2 - 15; })
        .attr("y", h)
        .transition()
        .ease(d3.easeLinear)
        .duration(2000)
        .attr("y", function(d) { return y(d.percentage.slice(0, -1) / 2);})         // use slice to remove percentage sign from the end of number
        .attr("dy", ".35em")
        .style("stroke", "papayawhip")
        .style("fill", "papayawhip");

    svg.selectAll(".g.rect").append("text")
        .text(function(d) { return d.percentage; })
        .attr("x", function(d) { return x(d.label) + x.bandwidth() / 2 - 20; })
        .attr("y", h)
        .transition()
        .ease(d3.easeLinear)
        .duration(2000)
        .attr("y", function(d) { return y(d.percentage.slice(0, -1)) - 10; })       // use slice to remove percentage sign from the end of number
        .attr("dy", ".35em")
        .attr("fill", function(d) { return d.color; });

现在我想应用文本转换。比如说90%（d.percentage），而不仅仅是打印。我希望它从0开始，逐渐变为d。在这种情况下，如何应用文本转换。我尝试了以下方法，但没有成功

svg.selectAll(".g.rect").append("text")
.text(function(d) { return d.percentage; })
.attr("x", function(d) { return x(d.label) + x.bandwidth() / 2 - 20; })
.attr("y", h)
.transition()
.ease(d3.easeLinear)
.duration(2000)
.tween("text", function(d) {
        var i = d3.interpolate(0, d.percentage.slice(0, -1));
        return function(t) {
            d3.select(this).text(i(t));
        };
})
.attr("y", function(d) { return y(d.percentage.slice(0, -1)) - 10; })       // use slice to remove percentage sign from the end of number
.attr("dy", ".35em")
.attr("fill", function(d) { return d.color; });

---

您的问题是您

返回函数（t）{…}

并尝试访问内部父函数的

此

。解决方案是返回箭头函数，该函数不会对该值进行阴影处理：

return t => d3.select(this).text(i(t));

（顺便说一下，您可能还希望在打印前对百分比进行四舍五入）

-------------编辑--------------

这是工作代码

var numberFormat = d3.format("d");

svg.selectAll(".g.rect").append("text")
.attr("x", function(d) { return x(d.label) + x.bandwidth() / 2 - 20; })
.attr("y", h)
.transition()
.ease(d3.easeLinear)
.duration(2000)
.tween("text", function(d) {
        var element = d3.select(this);
        var i = d3.interpolate(0, d.percentage.slice(0, -1));
        return function(t) {
            var percent = numberFormat(i(t));
            element.text(percent + "%");
        };
        //return t => element.text(format(i(t)));
})
.attr("y", function(d) { return y(d.percentage.slice(0, -1)) - 10; })       // use slice to remove percentage sign from the end of number
.attr("dy", ".35em")
.attr("fill", function(d) { return d.color; });

---

谢谢：）

问题在于

这个值

将其保存在闭包（
that
）中

使用数字插值器，以便将结果四舍五入到小数位数


var ptag=d3.select（'body'）。append（'p'）；
ptag.transition（）
.ease（d3.easeLinear）
.期限（2000年）
.tween（“文本”，功能（d）{
var=这个；
var i=d3.interpolate（0，90）；//Number（d.percentage.slice（0，-1））
返回函数（t）{
d3.选择（that）.text（i（t）.toFixed（2））；
};
})
tween函数返回d3选择。它应该只
返回i。还要检查它是否不应该是attrween（'text'，…）
我试图返回I，但它不起作用。我尝试了这个
.tween（“text”，函数（d）{var I=d3.interpolate（0，d.percentage.slice（0，-1））；返回I；}）
。但是仍然不工作…如果您这样做，
.attrTween（“text”，函数（d）{var i=d3.interpolate（0，d.percentage.slice（0，-1））；返回i；}）
。attrTween（'text'）
也不工作…是的，您是对的。它正在工作。但在较旧的浏览器上，无法识别箭头函数。在IE9上。但你是对的。箭头功能正在边缘或铬上工作。但不是在IE上9@Basit：如果我按“RunCodeSnippet”，它会工作（在Chrome中）。啊，对不起。是的，你是对的，它正在工作。我使用了
this
，但没有使用
d3。选择（那个）
。是的，你是对的。我很抱歉。它正在工作。请原谅我。实际上，我接受了雅罗斯拉夫·塞吉延科的答案，因为我在你提供答案之前就试过了。这个答案很有效。然后我修改了它来结束我的代码，然后你的答案来了。但请原谅我再次为我的错误评论道歉。我看能不能把它取下来。谢谢你的帮助，朋友：）