Javascript 向D3图形y轴标签添加换行符

我正在尝试在D3图形的y轴标签上添加一个换行符，它显示移动的带宽。现在它显示的是内联

5GB

，我希望它能这样显示

5
GB

因此，由于没有简单的方法向svg文本元素添加换行符，我选择在渲染后选择所有文本元素，我在空格处分割它们，并将它们放置在文本元素内部的

元素中，

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、数据、宽度、高度、边距）{
var x=d3.scale.linear（）
.domain（[0，数据[0]。长度-1]）
.范围（[margin.left，width margin.right]），
y=d3.刻度.线性（）
.domain（[0，d3.max（数据[0]））
.范围（[高度-边距.底部，边距.顶部]），
/*定义库存x轴和y轴*/
xAxis=d3.svg
.axis（）
.ticks（数据[0]。长度）
.tickFormat（函数（d）{返回d+1；}）
.比例（x）
.orient（“底部”），
yAxis=d3.svg
.axis（）
.比例（y）
.tickFormat（函数（d）{returnbytestosize（d，0）；}）
.orient（“右”），
/*线路路径发生器*/
line=d3.svg.line（）.interpolate（'单调'）
.x（函数（d，i）{返回x（i）；}）
.y（函数（d）{返回y（d）；}），
/*区域路径生成器*/
area=d3.svg.area（）.interpolate（'单调'）
.x（line.x（））
.y1（第.y（）行）
.y0（y（0）），
/*添加组*/
groups=svg.selectAll（“g”）
.数据（数据）
.输入（）
.附加（“g”）；
/*加上圆圈*/
svg.select（“g”）
.selectAll（“圆圈”）
.数据（数据[0]）
.输入（）
.附加（“圆圈”）
.attr（“类”、“点”）
.attr（“cx”，line.x（））
.attr（“cy”，line.y（））
.attr（“r”，3.5）
.样式（“填充”、“008cc2”）
.style（“笔划”，“#008cc2”）
.样式（“笔划宽度”、“1.5px”）；
/*添加轴*/
append（'g'）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-20+）”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.3em”）
.attr（“dy”，“-.3em”）
.attr（“转换”，函数（d）{
返回“旋转（-90）”
});
append（'g'）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
/*添加区域*/
区域=组。追加（“路径”）
.attr（“类别”、“区域”）
.attr（“d”，区域）
.样式（“不透明度”，0.3）
.样式（“填充”，功能（d，i）{
返回值（i==0？#008cc2）：#7500c6）；
});
/*添加行*/
groups.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，行）
.style（“填充”、“无”）
.样式（“笔划宽度”、“1.5px”）
.风格（“笔划”，功能（d，i）{
返回值（i==0？#008cc2）：#7500c6）；
});
var insertLinebreaks=函数（d）{
var el=$（d3.select（this.node（））；
var部分=bytesToSize（d，0）；
控制台日志（第[0]节）；
控制台日志（第[1]节）；
el.文本（“”）；
el.追加（''+节[0]+''）；
el.追加（“”+章节[1]+“”）；
};
svg.selectAll（'g.y.axis g text'）。每个（插入换行符）；
}
函数bytesToSize（字节、精度）
{
var千字节=1024；
var兆字节=千字节*1024；
var gigabyte=兆字节*1024；
var TB=千兆字节*1024；
如果（（字节>=0）和（&（字节<千字节））{
返回[bytes，'B']；
}
else if（（字节>=KB）和&（字节=MB）和&（字节=GB）和&（字节=TB）
{
返回[（字节/TB）.toFixed（精度），'TB']；
}
其他的
{
返回[bytes，'B']；
}
}

---

基本上，我想在svg文本元素中添加一个换行符。我尝试了几种方法，但都没有效果。

问题是您将

tspan

元素添加为文本，而没有名称空间。这样它们就会被解释为HTML。如果您使用D3添加它们，或者显式地创建带有名称空间的元素，那么它应该可以工作，即

el.text('');
d3.select(el).append("tspan").text(sections[0]);
...

---

您是否检查了相关的

tspan

元素是否按预期创建？我检查了，是的。HTML在那里，但没有显示任何内容。问题可能是在HTML中添加了新元素，而不是SVG名称空间。您是否尝试过使用D3附加

tspan

元素，或者使用正确的名称空间显式创建它们？这就成功了，添加名称空间修复了它。谢谢！：）好的，我会补充这一点作为将来参考的答案。