移動した帯域幅を表示する D3 グラフの y 軸ラベルに改行を追加しようとしています。現時点では inline5 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 テキスト要素に改行を追加したいと思います。いくつかの方法を試しましたが、うまくいきません。