d3中的垂直文本(未旋转)

Question

我试图使用d3在svg中垂直显示文本.但是我不想旋转它:我希望字母保持水平,但一个在另一个之上.设置writing-mode=tb似乎没有做任何事情.这是我尝试过的:

svg.append("text")
  .attr("x", 1000)
  .attr("y", 400)
  .attr("id", "title")
  .attr("font-size", 50)
  .attr("style", "font-family: arial; fill: lightgreen; writing-mode: tb")
  .text("Top 100 Mentions");

文本显示在正确的位置,使用正确的字体等,但它是水平的.

Answer 1

在谈论旋转SVG文本时,有多个不同方面:

• 浏览器如何根据前一个角色的位置确定下一个角色的位置;

• 字符如何相对于基线(rotate属性)旋转;

• 最终文本块如何相对于坐标系(transform属性)旋转.

完全,相当难以理解,这里的规格.

"写入模式"属性应该改变第一个方面而不影响其他方面,但是正如您发现它在Firefox中根本没有实现,而IE旋转文本但不尊重水平字形规则.

从理论上讲,你应该能够通过组合旋转和变换属性来获得相同的效果:变换整个<text>元素以将其旋转到垂直位置,然后反向旋转单个字符以使它们回到水平.但在实践中,它变得凌乱......

对于初学者来说,双重旋转会导致文本最终位于(x,y)点的左侧,因此如果(x,y)为(0,0),它将被剪切到SVG之外而没有补充移位.由于转换的,你需要一个负dy价值的文字移回锚点的权利.

其次,存在这样的事实:旋转被应用于每个角色到位,不调整角色的间隔以考虑"l"比宽度高得多的事实.因此,除非你使用等宽,否则事情看起来很混乱.您应该能够使用kerning和letterspacing属性更改字母间距,但浏览器对这些内容的支持也很差:IE11似乎不承认字距调整值,Firefox也不承认.

最后一个选择是自己控制布局:使用d3的强大功能和字符串.split("")方法将标题分解为单个字符<tspan>元素,这些元素可以一个位于彼此之下,并且整齐地位于<text>元素内.缺点是这会增加额外的DOM元素,您仍然可以选择整个文本块,就像在HTML段落中选择一个短语一样,即使每个字母都是单独的样式<span>.我不确定屏幕阅读器是否会自动假设字母之间有空格,但......

对照

这个小提琴尝试了三种方法来获得垂直文本标签中的水平字符(写作模式vs双旋转vs分裂成<tspan>s):http:
//jsfiddle.net/hx5Th/11/

码:

var svg = d3.select("body").append("svg");

//Green text, uses writing-mode property //
svg.append("text")
  .attr("x", 40)
  .attr("y", 40)
  .attr("id", "title")
  .attr("font-size", 50)
  .attr("style", "fill: lightgreen; writing-mode: tb; glyph-orientation-vertical: 0")
  .text("Top 100 Mentions");

//Black text, uses a double rotate //
svg.append("text")
  .attr("x", 40)
  .attr("y", 40)
  .attr("id", "title")
  .attr("font-size", 50)
  .attr("rotate", -90)
  .attr("dx", "1em")
  .attr("dy", "-1em")
  .attr("kerning", 0)
  .attr("letter-spacing", "0.5em")
  .attr("transform", "translate(150,0) rotate(90)")
  .text("Top 100 Mentions");

//Blue text, uses d3 to create a series of tspans//
svg.append("text")
  .attr("x", 40)
  .attr("y", 40)
  .attr("font-size", 50)
  .attr("id", "title")
  .style("fill", "blue")
  .attr("transform", "translate(300,0)")
  .attr("text-anchor", "middle")
  .selectAll("tspan")
      .data("Top 100 Mentions".split(""))
  .enter().append("tspan")
      .attr("x", 0)
      .attr("dy", "0.8em")
      .text(function(d){return d;});

结果(所有在Windows 7系统上):

Chrome 33

IE 11

火狐

我认为这是胜利的d3 ......