6

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");

テキストは正しいフォントなどで正しい位置に表示されますが、水平です。

4

5 に答える 5

0

テキストをパス要素にバインドすることにより、テキストの位置と方向を制御できます。jsFiddleで実行中のバージョンを使用した以下の例：

var svg = d3.select("body").append("svg"),
    pi = Math.PI;

var arc = d3.svg.arc()
    .innerRadius(150)
    .outerRadius(180)
    .startAngle(0)
    .endAngle(-pi/2)

var path = svg.append("path")
    .attr("id","path1")
    .attr("d","M150 150 L150 20 Z")
    .attr("style","stroke:rgb(255,0,0);stroke-width:2")

// Add a text label.
var text = svg.append("text")
    .attr("x", 6)
    .attr("dy", 15);

text.append("textPath")
   .attr("stroke","black")
   .attr("xlink:href","#path1")
   .text("abc");
于 2013-03-15T17:07:34.653 に答える
0

これはあなたが望むことをするはずです（ただし、d3で表現する方法はわかりません）：

<text x="100" y="100" transform="rotate(90, 100, 100)" style="glyph-orientation-horizo​​ntal: 270;">一部の縦書きテキストが回転していません</text>

明らかに、x 座標と y 座標を独自の値に変更します。

于 2014-02-27T13:24:35.360 に答える