Css 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);

如果文本太长，我想在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);

但是，由于我是d3.js新手，有谁能帮助我实现上面的代码吗？或者，请建议是否可以使用CSS或SVG方法实现这些代码。

试试这种方法

function wrap() {
  var self = d3.select(this),
    textLength = self.node().getComputedTextLength(),
    text = self.text();
  while (textLength > (barWidth - 2 * padding) && text.length > 0) {
    text = text.slice(0, -1);
    self.text(text + '...');
    textLength = self.node().getComputedTextLength();
  }
}

var padding = 0, barWidth = x.bandwidth();
var xAxis = d3.select(".axis--x"); //Selector should be the class given to the x axis

xAxis.selectAll(".tick")
  .selectAll("text")
  .html("")
  .append('tspan').text(function(d) {
    return d;
  }).each(wrap);

var svg=d3.选择（“svg”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var x=d3.scaleBand（）.rangeRound（[0，宽度]）.padding（0.1），
y=d3.scaleLinear（）.rangeRound（[height，0]）；
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[{
“信”：“Abcdeafg Abcdeafg”，
“频率”：0.08167
}, {
“信”：“Bcdefagh Bcdefagh”，
“频率”：0.01492
}, {
“信”：“Cdefgahi Cdefgahi”，
“频率”：0.02782
}, {
“信”：“Defghaij Defghaij”，
“频率”：0.04253
}, {
“信”：“Efghaijk Efghaijk”，
“频率”：0.12702
}, {
“信”：“Fghijakl Fghijakl”，
“频率”：0.02288
}, {
“信函”：“Ghijaklm Ghijaklm”，
“频率”：0.02015
}, {
“信”：“Hijklman Hijklman”，
“频率”：0.06094
}, {
“信”：“Ijklmnao Ijklmnao”，
“频率”：0.06966
}, {
“信”：“Jklmnoap Jklmnoap”，
“频率”：0.00153
}, {
“信”：“Klmnopqa Klmnopqa”，
“频率”：0.00772
}, {
“信”：“Lmnopqar Lmnopqar”，
“频率”：0.04025
}, {
“信函”：“Mnopqrsa Mnopqrsa”，
“频率”：0.02406
}, {
“信”：“Nopqrsta Nopqrsta”，
“频率”：0.06749
}, {
“信”：“Opqrstua Opqrstua”，
“频率”：0.07507
}, {
“信函”：“Pqrstuva Pqrstuva”，
“频率”：0.01929
}, {
“信”：“Qrstuvwa Qrstuvwa”，
“频率”：0.00095
}, {
“信函”：“Rstuvwxya Rstuvwxya”，
“频率”：0.05987
}];
data.forEach（函数（d）{
d、 频率=+d.频率；
返回d；
});
x、 域（data.map）（函数（d）{
回信；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.frequency；
})]);
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.call（d3.axisLeft（y）.ticks（10，“%”）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.71em”）
.attr（“文本锚定”、“结束”）
.文本（“频率”）；
g、 选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.letter）；
})
.attr（“y”，函数（d）{
返回y（d.频率）；
})
.attr（“宽度”，x.带宽（））
.attr（“高度”，功能（d）{
返回高度-y（d.频率）；
});
函数换行（）{
var self=d3。选择（此），
textLength=self.node（）.getComputedTextLength（），
text=self.text（）；
while（textLength>（barWidth-2*填充）和&text.length>0）{
text=text.slice（0，-1）；
self.text（text+“…”）；
textLength=self.node（）.getComputedTextLength（）；
}
}
var padding=0，barWidth=x.bandwidth（）；
var xAxis=d3。选择（“.axis--x”）；
xAxis.selectAll（“.tick”）
.selectAll（“文本”）
.html（“”）
.append（'tspan'）.text（函数（d）{
返回d；
}).每件（包装）
.bar{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.轴--x路径{
显示：无；
}