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 속성)를 기준으로 회전하는 방식.

Full, rather difficult to comprehend, specs here. IE는 텍스트를 회전하지만 수평 그리 규칙을 존중하지 않는 동안

'쓰기 모드'속성은 다른 사람에 영향을주지 않고 제 1 양태를 변경하기로되어 있지만 it's not implemented at all in Firefox 발견으로한다.

이론적으로, 당신은 회전을 결합하여 같은 효과를 얻을 수 및 특성을 변환 할 수 있어야한다 : 그들을 다시 얻을 수있는 개별 문자를-회전 역 회전 한 후, 수직 위치로 회전 전체 <text> 요소를 변환 수평. 그러나 실제로, 그것은 지저분 해집니다 ...

이중 회전은 텍스트가 (x, y) 점의 왼쪽에 끝나게하므로, (x, y)가 (0, 0) 보충 교대없이 SVG 외부에서 잘립니다. 변형 때문에 앵커 포인트 오른쪽으로 텍스트를 이동하려면 음수 dy 값이 필요합니다.

둘째로, 회전이 각 문자 위치에 적용된다는 사실이 있습니다. 문자의 간격은 "l"이 너비보다 훨씬 큽니다. 따라서 모노 스페이스를 사용하지 않는 한 상황이 꽤 혼란스러워 보입니다.kerning 및 letterspacing 속성을 사용하여 문자 간격을 변경할 수 있어야하지만 브라우저 지원도 좋지 않습니다. IE11은 커닝 값을 인식하지 못하는 것 같고 Firefox는이를 인식하지 못합니다. 는 단일 문자로 서로 아래 하나의 위치와 내 깔끔하게을 중심으로 할 수 <tspan> 요소을 제목을 깰 D3의 파워와 문자열 .split("") 방법을 사용하십시오

마지막 옵션은 레이아웃 자신의 컨트롤을하는 것입니다 <text> 요소 단점은 추가 DOM 요소를 추가한다는 것입니다. 텍스트 블록을 전체적으로 선택할 수 있습니다. 단, 각 글자가 개별 <span>의 스타일 인 경우에도 HTML 단락에서 구문을 선택할 수있는 것과 같습니다. 스크린 리더가 자동으로하지만, 글자 사이에 공백이 있다고 가정한다면 나는

비교

이 바이올린은 수직 텍스트 레이블에서 수평 문자를 얻을 수있는 세 가지 방법을 시도한다 (쓰기 ... 잘 모르겠어요
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;}); 

<tspan>들에 이중 회전 대 분할) 대 을 -mode 17,451,515,

결과 (윈도우 7 시스템의 모든) :

크롬 33

IE 11

파이어 폭스는

나는이 생각 승리를위한 d3입니다 ...

Answer 2

텍스트를 경로 요소에 바인딩하여 위치와 방향을 제어 할 수 있습니다. (나는 D3에서 그것을 표현하는 방법을 모른다하더라도)

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

Answer 3

이 당신이 원하는 것을 수행해야합니다 : running version on jsFiddle 로모그래퍼 아래 예

< 텍스트 X = "100"Y = "100" transform = "rotate (90, 100, 100)"style = "glyph-orientation-horizontal : 270;" > 일부 수직 텍스트는 회전하지 않음 </텍스트 >

분명히 x 및 y 좌표를 원하는 값으로 변경하십시오.

Answer 4

파이어 폭스의 경우, FF30으로 구현 한 유일한 점은 textLength입니다. 나는 AmeliaBR의 jsfiddle에 4 번째 추가 된 텍스트를 추가하여 설명했습니다. 여전히 쓰레기 같아 보이고 D3는 여전히 우승자입니다. 나를 위해 http://jsfiddle.net/hx5Th/11/

//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("textLength", "12.8em") 
    .attr("transform", "translate(450,0) rotate(90)") 
    .text("Top 100 Mentions");