小编Rak*_*esh的帖子

D3.js 为轴标签 SVG 实现省略号

下面是用于显示轴的代码

var xScale = d3.scale.ordinal()
.rangeRoundBands([0, totalWidth], barSpacing(optionsConfig.chart.barSpacing))
.domain(chartData.map(function(d) {
    return d[xValue];
}));
// Assign Scale to X Axis
xAxis.scale(xScale);
Run Code Online (Sandbox Code Playgroud)

如果文本太长,我想在 x 轴上显示省略号我指的是链接,其中包含以下解决方案

function wrap() {
        var self = d3.select(this),
            textLength = self.node().getComputedTextLength(),
            text = self.text();
        while (textLength > (width - 2 * padding) && text.length > 0) {
            text = text.slice(0, -1);
            self.text(text + '...');
            textLength = self.node().getComputedTextLength();
        }
    } 
text.append('tspan').text(function(d) { return d.name; }).each(wrap);
Run Code Online (Sandbox Code Playgroud)

但是任何人都可以帮助我如何实现上述代码,因为我是 d3.js 的新手,或者请建议是否可以使用 CSS 或 SVG 方法来完成。

css svg d3.js

2
推荐指数
1
解决办法
1888
查看次数

标签 统计

css ×1

d3.js ×1

svg ×1