我正在尝试在我的 D3 图表上的 y 轴标签上添加一个换行符，它显示移动的带宽。目前它显示 inline 5 GB，我希望它像这样显示，
5
GB
因此，由于没有简单的方法可以为 svg 文本元素添加换行符，因此我选择在渲染完所有文本元素后选择它们，我将它们拆分为空间并将它们定位在<tspan>文本元素内的元素中，GB位置略低于该值，这似乎有效，除了标签根本不显示，即使它们确实存在于页面上。
这是代码片段，
function init(svg,data,width,height,margin){
var x = d3.scale.linear()
.domain([0,data[0].length-1])
.range([margin.left, width-margin.right]),
y = d3.scale.linear()
.domain([0,d3.max(data[0])])
.range([height-margin.bottom, margin.top]),
/* Define stock x and y axis */
xAxis = d3.svg
.axis()
.ticks(data[0].length)
.tickFormat(function(d) { return d+1; })
.scale(x)
.orient('bottom'),
yAxis = d3.svg
.axis()
.scale(y)
.tickFormat(function(d) { return bytesToSize(d,0); })
.orient('right'),
/* line path generator */
line = d3.svg.line().interpolate('monotone')
.x(function(d,i) { return x(i); })
.y(function(d) { return y(d); }),
/* area path generator */
area = d3.svg.area().interpolate('monotone')
.x(line.x())
.y1(line.y())
.y0(y(0)),
/* add the groups */
groups = svg.selectAll("g")
.data(data)
.enter()
.append("g");
/* add the circles */
svg.select("g")
.selectAll("circle")
.data(data[0])
.enter()
.append("circle")
.attr("class","dot")
.attr("cx", line.x())
.attr("cy", line.y())
.attr("r", 3.5)
.style("fill","#008cc2")
.style("stroke","#008cc2")
.style("stroke-width","1.5px");
/* add the axes */
svg.append('g')
.attr("class", "x axis")
.attr("transform", "translate(0,"+(height - 20)+")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.3em")
.attr("dy", "-.3em")
.attr("transform", function(d) {
return "rotate(-90)"
});
svg.append('g')
.attr("class", "y axis")
.call(yAxis);
/* add the areas */
area = groups.append("path")
.attr("class", "area")
.attr("d",area)
.style("opacity",0.3)
.style("fill", function(d,i) {
return (i == 0 ? "#008cc2" : "#7500c6" );
});
/* add the lines */
groups.append("path")
.attr("class", "line")
.attr("d", line)
.style("fill","none")
.style("stroke-width", "1.5px")
.style("stroke", function(d,i) {
return (i == 0 ? "#008cc2" : "#7500c6" );
});
var insertLinebreaks = function (d) {
var el = $(d3.select(this).node());
var sections = bytesToSize(d,0);
console.log(sections[0]);
console.log(sections[1]);
el.text('');
el.append('<tspan>'+sections[0]+'</tspan>');
el.append('<tspan x="0" dy="3">'+sections[1]+'</tspan>');
};
svg.selectAll('g.y.axis g text').each(insertLinebreaks);
}
function bytesToSize(bytes, precision)
{
var kilobyte = 1024;
var megabyte = kilobyte * 1024;
var gigabyte = megabyte * 1024;
var terabyte = gigabyte * 1024;
if ((bytes >= 0) && (bytes < kilobyte)) {
return [bytes,'B'];
}
else if ((bytes >= kilobyte) && (bytes < megabyte))
{
return [(bytes / kilobyte).toFixed(precision),'KB'];
}
else if ((bytes >= megabyte) && (bytes < gigabyte))
{
return [(bytes / megabyte).toFixed(precision),'MB'];
}
else if ((bytes >= gigabyte) && (bytes < terabyte))
{
return [(bytes / gigabyte).toFixed(precision),'GB'];
}
else if (bytes >= terabyte)
{
return [(bytes / terabyte).toFixed(precision),'TB'];
}
else
{
return [bytes,'B'];
}
}
基本上我想为 svg 文本元素添加换行符。我尝试了几种方法，但无济于事。