4
대역폭을 이동 한 D3 그래프의 Y 축 레이블에 줄 바꿈을 추가하려고합니다. 이 인라인 5 GB를 표시하는 순간, 나는 그것이 SVG 텍스트 요소에 줄 바꿈을 추가하는 쉬운 방법이 없기 때문에,D3 그래프 Y 축 레이블에 줄 바꿈 추가
5
GB
그래서, 그래서 같이 표시하고자, 나는 모두를 선택하는 선택했다 텍스트 요소를 렌더링 한 후에 공간에서 분할하고 GB이 값보다 약간 낮은 위치에있는 <tspan> 요소를 텍스트 요소 내부에 배치했습니다. 이는 전혀 표시되지 않는 레이블을 제외하고는 효과가있는 것처럼 보였습니다. 그들이 페이지에 있었더라도. 여기
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'];
}
}
확인할 못했다는'관련 사용자가 예상하는대로 tspan' 요소들이 생성된다? –
나는 그랬다. HTML은 있지만 아무 것도 표시되지 않습니다. – Odyss3us
새 요소가 SVG 네임 스페이스가 아닌 HTML에 추가되는 것이 문제 일 수 있습니다. D3을 사용하여'tspan' 요소를 추가하려 했습니까? 아니면 올바른 네임 스페이스를 사용하여 명시 적으로 생성 했습니까? –