Question

我试图在svg上将被调用的数据包装成两行文本。现在它正在六行显示文本。有人能帮忙吗。

    function wrap(text, width, content) {
    text.each(function () {
        var text = d3.select(this),
            words = content.split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1, // ems
            x = text.attr("x"),
            y = text.attr("y"),
            dy = 0, //parseFloat(text.attr("dy")),
            tspan = text.text(null)
                        .append("tspan")
                        .attr("x", x)
                        .attr("y", y)
                        .attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(''));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan")
                            .attr("x", x)
                            .attr("y", y)
                            .attr("dy", ++lineNumber * lineHeight + dy + "em")
                            .text(word);
            }
        }
    });
}

  Thermometer.prototype.drawTick = function(t, label, labelColor, textOffset, width, tubeWidth, lineColor, scale, svg) {

    svg.append("line")
      .attr("id", label + "Line")
      .attr("x1", width / 2 - tubeWidth / 2)
      .attr("x2", width / 2 + tubeWidth / 2)
      .attr("y1", scale(t))
      .attr("y2", scale(t))
      .style("stroke", lineColor)
      .style("stroke-width", "2px")
      .style("shape-rendering", "crispEdges");
    if (label) {
      svg.append("text")
        .attr("x", width / 2 + tubeWidth / 2 + 15)
        .attr("y", scale(t))
        .attr("dy", ".5em")
        .text(label)
        .style("fill", labelColor)
        .style("stroke", "black")
        .style("font-size", "14px")
        .call(wrap,30,label)
    }
  };
  return Thermometer;

我小提琴的链接就在这里 https://jsfiddle.net/corcorancr/sxs5n2cw/1/

Answer 1

drawTick()函数调用另一个名为wrap()的函数来绘制文本。正如该名称所暗示的那样，wrap()将输入文本拆分为单词并将其包装到新行中，如果它比您传入的宽度更宽。

宽度值是＆＃34; 30＆＃34;在以下行中：

.call(wrap,30,label)

尝试将其更改为更大的尺寸，以便它不会很快换行。 180似乎是正确的价值。

https://jsfiddle.net/sxs5n2cw/4/

svg文本包装问题

1 个答案: