Wrap text in Kreis

Ich bin mit d3 zu zeichnen Sie ein UML-Diagramm und möchte Zeilenumbruch innerhalb der Formen gezeichnet mit d3. Ich habe soweit den code unten und kann nicht eine Lösung finden, um den text " fit " innerhalb meiner Form (siehe Bild unten).

var svg =  d3.select('#svg')
    .append('svg')
        .attr('width', 500)
        .attr('height', 200);

var global = svg.append('g');

global.append('circle')
      .attr('cx', 150)
      .attr('cy', 100)
      .attr('r', 50);

global.append('text')
  .attr('x', 150)
  .attr('y', 100)
  .attr('height', 'auto')
  .attr('text-anchor', 'middle')
  .text('Text meant to fit within circle')
  .attr('fill', 'red');

Wrap text in Kreis

Ich Stand vor diesem problem noch. D3 nicht, meines Wissens wenigstens, über eine Möglichkeit, dies zu tun, müssen Sie ein Programm brechen Ihre Worte, die in separaten Zeilen in Ihre eigenen tspan ist, die Anpassung Ihrer dy-Attribut für jede Zeile. Dann, zentrieren Sie es über den Kreis, berechnen Sie den radius, und nach unten skalieren, um zu passen, wenn nötig. Ich habe nicht funktionierenden code für diese, wie ich war in der Lage zu entkommen, brechen jedes Wort auf eigene Linie, aber das ist die grundlegende Idee.
Ich habe das Gefühl, dass dies eine verdammt gute Frage, eine verdammt gute Antwort.
Hier ist eine ähnliche Frage: (stackoverflow.com/questions/17709485/...) ... aber Nein, Nein, es war keine zufriedenstellende Antwort!

InformationsquelleAutor vladiim | 2014-01-03

7

SVG nicht Textumbruch, aber mit foreignObject können Sie einen ähnlichen Effekt erzielen. Unter der Annahme, dass radius ist der radius des Kreises, können wir berechnen, die Abmessungen einer box, die passen in den Kreis:
```
var side = 2 * radius * Math.cos(Math.PI / 4),
    dx = radius - side / 2;

var g = svg.append('g')
    .attr('transform', 'translate(' + [dx, dx] + ')');

g.append("foreignObject")
    .attr("width", side)
    .attr("height", side)
    .append("xhtml:body")
    .html("Lorem ipsum dolor sit amet, ...");
```
Sollte die Gruppe verdrängt werden, eine kleine Menge, damit der text zentriert. Ich weiß, dass dies nicht genau das, was gefragt ist, es kann aber hilfreich sein. Ich schrieb ein kleines fiddle. Das Ergebnis wird wie folgt Aussehen:
- Leider ist die foreignObject element kann nicht vertikal zentriert. Wenn der text zu kurz ist, wird es ausgerichtet, um die Oberseite der box.
- Beachten Sie, dass foreignObject funktioniert nicht mit IE.
InformationsquelleAutor Pablo Navarro

Hier ist das beste was ich tun konnte.

Wrap text in Kreis

Möchte ich center und wrap einen text in einem Kreis oder rect im SVG.
Der text sollte zentriert bleiben (horizontal/vertikal) unabhängig von der Textlänge.

CSS:

svg {
    width: 600px;
    height: 200px;
    background-color: yellow;
}
.circle {
    background-color: blue;
    height: 100%;
    border-radius: 100%;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
}
.circle span {
    line-height: normal;
    display:inline-block;
    vertical-align: middle;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

HTML:

<svg>
    <foreignObject width="200" height="200" x="100" y="100" transform="translate(-100,-100)">
        <div class="circle">
            <span>Here is a</span>
        </div>
    </foreignObject>

    <foreignObject width="200" height="200" x="300" y="100" transform="translate(-100,-100)">
        <div class="circle">
            <span>Here is a paragraph</span>
        </div>
    </foreignObject>

    <foreignObject width="200" height="200" x="500" y="100" transform="translate(-100,-100)">
        <div class="circle">
            <span>Here is a paragraph that requires word wrap</span>
        </div>
    </foreignObject>
</svg>

Des transform-Attributs ist nicht zwingend, ich bin mit translate(-r, -r), so dass (x,y) des foreignObject ist wie der (cx, cy) des SVG-Kreis, und Breite, Hoehe = 2*r, mit r der radius ist.

Ich Tat dies, um die Verwendung als Knoten in einem D3-force-layout. Lasse ich als übung übersetzen dieses javascript-snippet in D3 ist Stil.

InformationsquelleAutor bformet

4

Wenn Sie fügen Ihren Inhalt in eine <text> element unmittelbar unterhalb des SVG-Form sind, dann können Sie D3plus' .textwrap() Funktion, genau das zu tun. Ich zitiere aus dem Dokumentation:

Mit d3plus.textwrap -, SVG - <text> Elemente durchbrochen werden kann, in getrennte
<tspan> Linien, wie HTML funktioniert mit <div> Elemente....
D3plus erkennt automatisch, wenn es eine <rect> oder <circle> element
direkt vor der <text> container-element in den DOM, und verwendet
das element ist in Form und Abmessungen, um wickeln Sie den text. Wenn es nicht finden können
eines, oder dieses Verhalten muss überschrieben werden, können Sie manuell sein
angegeben mit .shape( ), .width( ), und .height( ).

Habe ich einen codepen zur besseren Veranschaulichung dieses, da die Beispiele in der Dokumentation kann ein wenig verwirrend sein: http://codepen.io/thdoan/pen/rOPYxE
- nicht zuverlässig Bibliothek
- das ist wirklich schön, aber es bricht lange Wörter. Wir könnten abschneiden/trennen, sondern die maximal mögliche Länge hängt davon ab, welche Linie innerhalb des Kreises dieses Wort ist.
InformationsquelleAutor thdoan

Es ist nicht ideal, aber @Pablo.Navarro Antwort führte mich zum folgenden.

var svg =  d3.select('#svg')
  .append('svg')
    .attr('width', 500)
    .attr('height', 200);

var radius = 60,
    x      = 150,
    y      = 100,
    side   = 2 * radius * Math.cos(Math.PI / 4),
    dx     = radius - side / 2;

var global = svg.append('g')
  .attr('transform', 'translate(' + [ dx, dx ] + ')');

global.append('circle')
  .attr('cx', x)
  .attr('cy', y)
  .attr('r', radius);

global.append('foreignObject')
  .attr('x', x - (side/2))
  .attr('y', y - (side/2))
  .attr('width', side)
  .attr('height', side)
  .attr('color', 'red')
  .append('xhtml:p')
    .text('Text meant to fit within circle')
    .attr('style', 'text-align:center;padding:2px;margin:2px;');

Ergebnis

Wrap text in Kreis

Ja, aber Sie müssen ziemlich großen Kreis. In anderen Worten, die Methode nicht effizient verwenden, der Kreis.
Vereinbart, Es ist nicht ideal, gibt aber das Ergebnis wollte ich. Immer noch hoffnungsvoll, dass die richtige Antwort kommt. Letztlich Ihre Bedürfnisse zu sein, eine Beziehung zwischen dem text und Kreis und für Sie skaliert entsprechend.
Sind Sie richtig. BTW, seine erstaunlich, dass niemand es gelöst, indem jetzt (ich meine, all die Jahre...). Sehr gute Frage!
Schön, das zentrieren von text ist eine gute Idee.
Ich habe meine Antwort, die ist ein wenig besser, hoffe ich. Sie immer noch müssen, kümmern sich die Schriftgröße, wenn der text zu lang.

InformationsquelleAutor vladiim

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.