4

我正在尝试在我的 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 文本元素添加换行符。我尝试了几种方法,但无济于事。

4

1 回答 1

4

问题是您将tspan元素添加为没有命名空间的文本。这样它们就被解释为 HTML。如果您使用 D3 添加它们或使用命名空间显式创建元素,它应该可以工作,即

el.text('');
d3.select(el).append("tspan").text(sections[0]);
...
于 2013-08-29T08:30:34.417 回答