d3 Knotenbeschriftung

Ich habe mit dem Beispielcode aus das d3-Projekt um zu erfahren, wie Darstellung d3 Grafiken und ich kann nicht scheinen, um text zu zeigen, bis in die Mitte der Kreise (ähnlich dieses Beispiel und dieses Beispiel). Ich habe andere Beispiele, und haben versucht, indem

node.append("title").text("Node Name To Display")

und

node.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em").text("Node Name To Display")

direkt nach Knoten definiert ist, aber die einzigen Ergebnisse, die ich sehen, ist "Node-Name Anzeigen" wird angezeigt, wenn ich den Mauszeiger über die einzelnen Knoten. Es ist nicht angezeigt als text innerhalb des Kreises. Muss ich schreiben, dass meine eigenen svg-text-Objekt, und bestimmen Sie die Koordinaten, die benötigt werden, platziert auf der Basis der Koordinaten der radius des Kreises? Von den beiden anderen Beispielen, es würde scheinen, dass d3 schon nimmt sorgen der irgendwie. Ich weiß nur nicht das richtige Attribut zu nennen/stellen.

InformationsquelleAutor der Frage Josh Bradley | 2012-06-19

  1. 78

    Gibt es viele Beispiele zeigt, wie Beschriftungen hinzufügen, um graph und Baum-Darstellungen, aber ich würde wahrscheinlich beginnen mit dieser als am einfachsten:

    Du noch nicht gepostet einen link zu deinem code, aber ich vermute, dass node bezieht sich auf eine Auswahl von SVG-Kreis-Elemente. Sie können nicht hinzufügen von text-Elementen auf Kreis-Elemente, weil Kreis-Elemente sind nicht Container; hinzufügen eines Textelements zu einem Kreis werden ignoriert.

    In der Regel verwenden Sie ein element G der Gruppe ein Kreis-element (oder ein Bild-element, wie oben) und ein text-element für jeden Knoten. Die entstehende Struktur sieht wie folgt aus:

    <g class="node" transform="translate(130,492)">
  <circle r="4.5"/>
  <text dx="12" dy=".35em">Gavroche</text>
</g>

    Verwenden Daten-beitreten zu schaffen, die G-Elemente für die einzelnen Knoten, und verwenden Sie dann Auswahl.Anhängen hinzufügen ein Kreis und ein text-element für jeden. So etwas wie dieses:

    var node = svg.selectAll(".node")
    .data(nodes)
  .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", 4.5);

node.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

    Einen Nachteil dieses Ansatzes ist, dass Sie wollen, dass die Beschriftungen gezeichnet werden, der auf der Spitze der Kreise. Da SVG noch nicht unterstützt z-index, der die Elemente gezogen werden, die in Dokument-Ordnung; also, den obigen Ansatz bewirkt, dass ein label gezeichnet werden über den Kreis seineraber es kann gezogen werden unter anderen Kreisen. Sie können dieses Problem beheben, durch die Verwendung von zwei Daten-Verknüpfungen und die Erstellung von separaten Gruppen für die Kreise und Beschriftungen, etwa so:

    <g class="nodes">
  <circle transform="translate(130,492)" r="4.5"/>
  <circle transform="translate(110,249)" r="4.5"/>
  …
</g>
<g class="labels">
  <text transform="translate(130,492)" dx="12" dy=".35em">Gavroche</text>
  <text transform="translate(110,249)" dx="12" dy=".35em">Valjean</text>
  …
</g>

    Und die entsprechenden JavaScript:

    var circle = svg.append("g")
    .attr("class", "nodes")
  .selectAll("circle")
    .data(nodes)
  .enter().append("circle")
    .attr("r", 4.5)
    .call(force.drag);

var text = svg.append("g")
    .attr("class", "labels")
  .selectAll("text")
    .data(nodes)
  .enter().append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

    Diese Technik wird verwendet, in der Mobile-Patent-Anzüge Beispiel (mit einem zusätzlichen text-element verwendet, um eine white shadow).

    InformationsquelleAutor der Antwort mbostock

  2. 2

    Wenn Sie wachsen wollen, die Knoten zu passen, große Etiketten, die Sie verwenden können, die getBBox-Eigenschaft des SVG-text - (Knoten) nachdem Sie gezeichnet haben. Hier ist, wie ich es gemacht habe, für eine Liste von Knoten, die mit festen Koordinaten und zwei mögliche Formen:

    nodes.forEach(function(v) {
  var nd;
  var cx = v.coord[0];
  var cy = v.coord[1];

  switch (v.shape) {
    case "circle":
      nd = svg.append("circle");
      break;
    case "rectangle":
      nd = svg.append("rect");
      break;
  }

  var w = 10;
  var h = 10;
  if (v.label != "") {
    var lText = svg.append("text");

    lText.attr("x", cx)
         .attr("y", cy + 5)
         .attr("class", "labelText")
         .text(v.label);

    var bbox = lText.node().getBBox();
    w = Math.max(w,bbox.width);
    h = Math.max(h,bbox.height);
  }

  var pad = 4;

  switch (v.shape) {
    case "circle":
      nd.attr("cx", cx)
        .attr("cy", cy)
        .attr("r", Math.sqrt(w*w + h*h)/2 + pad);
      break;
    case "rectangle":
      nd.attr("x", cx - w/2 - pad)
        .attr("y", cy - h/2 - pad)
        .attr("width", w + 2*pad)
        .attr("height", h + 2*pad);
      break;
  }

});

    Beachten Sie, dass die Form Hinzugefügt wird, wird der text Hinzugefügt wird, dann der Form positioniert ist, um den text zu zeigen, auf der Oberseite.

    InformationsquelleAutor der Antwort Aleks Kissinger

  3. 1

    Fand ich diese Anleitung sehr nützlich, zu versuchen, etwas zu erreichen ähnlich :

    https://www.dashingd3js.com/svg-text-element

    Basierend auf obigen link dieser code generiert circle labels : 

    <!DOCTYPE html>
<html>
  <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   </head>
<body style="overflow: hidden;">
<div id="canvas"  style="overflow: hidden;"></div>

<script type="text/javascript">

    var graph = {
        "nodes": [
            {name: "1", "group": 1, x: 100, y: 90, r: 10 , connected : "2"},
            {name: "2", "group": 1, x: 200, y: 50, r: 15, connected : "1"},
            {name: "3", "group": 2, x: 200, y: 130, r: 25, connected : "1"}
        ]
    }

    $( document ).ready(function() {

        var width = 2000;
        var height = 2000;

        var svg = d3.select("#canvas").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g");

        var lines = svg.attr("class", "line")
                .selectAll("line").data(graph.nodes)
                .enter().append("line")
                .style("stroke", "gray") //<<<<< Add a color
                .attr("x1", function (d, i) {
                    return d.x
                })
                .attr("y1", function (d) {
                    return d.y
                })
                .attr("x2", function (d) {
                    return findAttribute(d.connected).x
                })
                .attr("y2", function (d) {
                    return findAttribute(d.connected).y
                })

        var circles = svg.selectAll("circle")
                .data(graph.nodes)
                .enter().append("circle")
                .style("stroke", "gray")
                .style("fill", "white")
                .attr("r", function (d, i) {
                    return d.r
                })
                .attr("cx", function (d, i) {
                    return d.x
                })
                .attr("cy", function (d, i) {
                    return d.y
                });

        var text = svg.selectAll("text")
                                .data(graph.nodes)
                                .enter()
                               .append("text");

        var textLabels = text
          .attr("x", function(d) { return d.x; })
          .attr("y", function(d) { return d.y; })
          .text( function (d) { return d.name })
          .attr("font-family", "sans-serif")
          .attr("font-size", "10px")
          .attr("fill", "red");

    });

    function findAttribute(name) {
        for (var i = 0, len = graph.nodes.length; i < len; i++) {
            if (graph.nodes[i].name === name)
                return graph.nodes[i]; //Return as soon as the object is found
        }
        return null; //The object was not found
    }


</script>
</body>
</html>

    InformationsquelleAutor der Antwort blue-sky

Schreibe einen Kommentar