在复杂转换中使用不同字体权重的tspan文本

时间:2017-06-14 14:41:07

标签: javascript d3.js

所以我已经实现了Gerardo的以下优秀建议,但随后的转换否定了两种不同的字体权重,它们都以粗体显示

上一篇文章: Portion of label bold - the rest not bold

代码

text.enter()
    .append("text")
    .attr("dy", ".35em")
    .style("opacity", 0.01)
    .style("font-weight", 700)
    .text(function(d) {
        return (d.data.NAME + ": ");
    })
    .append("tspan")
    .style("font-weight", 200)
    .text(function(d) {
        return d.data.amount;
    });


text
    .transition()
    .duration(1400)
    .style("opacity", 1)
    .style("font-weight", 700)
    .attrTween("transform", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            var pos = outerArc.centroid(d2);

            pos[0] = _radius * (midAngle(d2) < Math.PI ? 0.90 : -0.90);
            return "translate(" + pos + ")";
        };
    })
    .styleTween("text-anchor", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            return midAngle(d2) < Math.PI ? "start" : "end";
        };
    })
    .text(function(d) {
        if (d.endAngle - d.startAngle < 8.2 * Math.PI / 180) {
            return ""
        }
        return (d.data.NAME + ": " + d.data.amount);
    })
    ;

0 个答案:

没有答案