vertikaler text in d3 (nicht gedreht)

Ich versuche text für die Anzeige vertikal in svg mit d3. Ich will nicht, es zu drehen, aber: ich möchte die Buchstaben zu bleiben, die horizontale, aber eine über der anderen. Einstellung writing-mode=tb scheint nicht, etwas zu tun. Hier ist, was ich versucht habe:

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

Dem text zeigt sich in der richtigen Lage, mit der richtigen schriftart usw, aber es horizontal ist.

Funktioniert bei mir in Chrome aber nicht in Firefox: jsfiddle.net/hx5Th
Firefox unterstützt kein tb schreiben-Modus noch.
Danke, das war das problem. Ich habe versucht es in den Chrome und es funktioniert, obwohl ich hinzufügen muss glyph-orientation-vertical: 0 um den Stil zu halten, der text wird gedreht.

InformationsquelleAutor Samarth | 2013-03-15

11

Beim sprechen über rotierende SVG-text, gibt es mehrere verschiedene Aspekte:
- wie der browser bestimmt, wo das nächste Zeichen auf der Grundlage der vorherigen Zeichenposition;
- wie die Figuren drehen sich relativ zur Grundlinie (rotate Attribut);
- wie der endgültige text, der block als ganzes gedreht wird, relativ zu dem Koordinatensystem (transform- Attribut).
Voller, ziemlich schwer zu begreifen, specs hier.

Die 'writing-mode' - Eigenschaft soll nun der erste Aspekt ohne den anderen, aber als Sie entdeckt es ist nicht umgesetzt in Firefox, während der IE dreht den text, aber nicht hinsichtlich der horizontalen-Glyphe Regel.

Theoretisch, Sie sollten in der Lage sein, um den gleichen Effekt durch die Kombination von drehen und transformieren Attribute: verwandeln Sie das gesamte <text> element, um es zu drehen in einer vertikalen position, dann rückwärts-drehen Sie die einzelnen Zeichen, um Sie zurück in die horizontale. Aber in der Praxis wird es chaotisch...

Für Vorspeisen, die Doppel-Drehungen machen das der text am Ende auf der linken Seite der (x,y) Punkt, so dass, wenn (x,y) ist (0,0), wird Sie abgeschnitten werden, die außerhalb des SVG-ohne zusätzliche shift. Da die Transformationen, benötigen Sie eine negative dy Wert bewegen Sie den text wieder rechts an den Ankerpunkt.

Zweitens gibt es die Tatsache, dass die rotation angewendet wird, um jedes Zeichen in Ort, den Abstand der Zeichen ist nicht angepasst aufgrund der Tatsache, dass ein "l" ist viel größer, als es breit ist. Also, es sei denn, Sie sind mit monospace-sieht alles ziemlich bunt gemischt. Sie sollen in der Lage sein, ändern Sie den Zeichenabstand mit dem kerning und letterspacing Eigenschaften, aber die browser-Unterstützung für diese ist auch arm: IE11 scheint nicht, zu erkennen an den kerning-Wert ein, und Firefox nicht anerkennen.

Letzte option ist die Kontrolle über das layout selbst: nutzen Sie die Kraft der d3 und der string .split("") Methode zu brechen, Ihre Titel in den single-Charakter <tspan> Elemente werden kann positioniert einer unter einander und zentriert fein säuberlich in die <text> element. Der Nachteil ist, dass dies fügt zusätzliche DOM-Elemente können Sie noch wählen Sie den block von text als ganzes, als könnten Sie einen Satz in einen HTML-Absatz, auch wenn jeder Brief wurde gestylt als separate <span>. Ich bin mir nicht sicher, ob Bildschirm-Leser automatisch davon ausgehen, dass es Räume zwischen den Buchstaben, aber...

Vergleich

Diese Geige versucht, aus den drei Möglichkeiten für die horizontale Zeichen in eine vertikale Beschriftung (Schrift-Modus vs Doppel drehen vs Aufspaltung in <tspan>s):

http://jsfiddle.net/hx5Th/11/

Code:
```
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;});
```
Ergebnisse (alle auf einem Windows 7-system):

Chrome 33

IE 11

Firefox

Ich denke, das ist d3 für den Sieg...
- Ich denke, es ist AmeliaBR für den Gewinn 🙂 Schöne Arbeit.
- Ein Jahr zu spät für Sie, aber hoffentlich jemand anderes helfen, in der Zukunft...
- Nein, im ernst...einer mehr für die Galerie von @AmeliaBR erklärt! Ihre Fangemeinde ist auf dem Vormarsch 🙂
InformationsquelleAutor AmeliaBR

Steuern Sie die position und Ausrichtung von text durch Bindung an ein path-element. Beispiel unten mit einem mit der version auf 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");

Danke für die Antwort, aber das dreht den text. Ich habe versucht, die früheren, und auch versucht, die standard -.attr("transform", "translate(1000,250) rotate(90)", die den gleichen Effekt erzielt. Ich möchte den text vertikal ohne gedreht wird, obwohl.

InformationsquelleAutor Richard Marr

0

Sollte dies tun, was Sie wollen (obwohl ich nicht weiß, wie ich das Ausdrücken soll es in d3):

<text x="100" y="100" transform="rotate(90, 100, 100)" style="glyph-orientation-horizontal: 270;">Einigen vertikalen text nicht gedreht</text>

Verändert sich natürlich auch die x und y coords, um Ihre eigenen Werte.
- Funktioniert in Chrome, aber nicht mit IE oder Firefox. Obwohl es hat den Vorteil (im Vergleich zur Verwendung von writing-mode), dass zumindest das label als ganzes wird an der gleichen Stelle positioniert, die in jedem browser, also es sieht nicht so schrecklich "kaputt".
InformationsquelleAutor Iwade Rock

Für Firefox, das einzige, was ich finden kann, dass Sie umgesetzt haben, als der FF 30 ist textLength. Ich fügte hinzu, eine vierte anfügen von text an AmeliaBR ist jsfiddle zu demonstrieren. Es sieht immer noch aus wie Mist dachte und D3 ist immer noch der Gewinner. 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");

InformationsquelleAutor pedz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Vergleich