2017-07-21 58 views
-2

我正在試圖將所謂的數據封裝到svg上的兩行文字上。現在它正在顯示六行以上的文字。有人能幫忙嗎。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/

+0

我沒有看到任何更改? – Corcorancr

+0

我想你沒有自己寫這個代碼(?)要弄清楚爲什麼會發生這種情況是很容易的。你試圖做什麼來調試它? –

+0

如果很容易,請幫忙 – Corcorancr

回答

0

drawTick()功能是調用稱爲wrap()繪製文本的另一個功能。正如可能由該名稱所暗示的那樣,wrap()正在將輸入文本拆分爲單詞,並且如果它的寬度比您通過的寬度更寬,則將其包裝到新行中。

寬度值是以下行中的「30」 :

.call(wrap,30,label) 

嘗試將其更改爲更大的東西,以便它不會很快包裝。 180似乎是正確的價值。

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