Hinzufügen eines title-Attribut zu svg:g-element in D3.js

Baue ich eine app mit D3.js das zeigt eine Daten in einer Baumstruktur anzeigen. Im Idealfall, was ich möchte, ist die Baum-Karte ein tool-Tipp zur Anzeige von mehr Informationen auf jedem Knoten des Baumes-Karte. Die Baum-Karte zugeführt wird, Daten von einem .JSON-Datei.

Ich bin derzeit mit dem jquery-plug-in Poshy Tip wo kann ich das weitergeben dieser info durch die title= Attribut. Ich weiß, ich muss irgendwie hinzufügen das title-Attribut des svg:g-element in der Baum-Karte, aber ich kann nicht herausfinden, wo ich jeden Knoten Titel attr.

Hier ist der Anfang von meinem script, wo ich alle meine Erklärungen etc...

<div id="chart"></div>
<script type="text/javascript">
var tree = d3.layout.tree()
.size([h, w - 160]);

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(40,0)");

d3.json("test.json", function(json) {
  json.x0 = 800;
  json.y0 = 0;
  update(root = json);
});

Hier ist, wie ich bin mit poshytip() im Kopf

$(function(){
  $('node').poshytip({slide: false, followCursor: true, alignTo: 'cursor', 
    showTimeout: 0, hideTimeout: 0, alignX: 'center', alignY: 'inner-bottom',
    className: 'tip-twitter'});
}

Ziemlich viel, ich möchte nur in der Lage sein "mouseover" werden die einzelnen Elemente in den interaktiven Baum-Karte und erhalten Sie einen tooltip pop-up.. aber ich habe nicht hatte kein Glück. Wie kann ich einstellen, dass jedes Element eine bestimmte Id.. Mach ich das in der .JSON-Datei? Gibt es ein einfacher Weg, dies zu tun? Werde ich über diese in der falschen Art und Weise? Jede Hilfe wäre toll.

  • Wo ist der code, die Zeichnung ist tatsächlich der Baum? Es wird eine select-und eine Daten-option. Sie sollten in der Lage sein, einfach hinzufügen .attr ("title", "Mein Titel").
InformationsquelleAutor accraze | 2012-07-12
  1. 16
    var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);

var yourGElement = vis.append("svg:g").attr("transform", "translate(40,0)");

yourGElement.append("svg:title").text("Your tooltip info");
    • Beachten Sie jedoch, dass dies nicht funktioniert in der update-Falle. Wenn Ihr code braucht, um zu arbeiten ein 2. mal, um mit neuen Daten, die Sie benötigen, zu entfernen, und fügen Sie den Titel wieder, oder ändern Sie einfach Ihren text.
    InformationsquelleAutor Elijah
  2. 5
    nodeEnter.append("svg:circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
      .append("svg:title")
          .text(function(d){return "Name:"+d.Name+"\nAge:"+d.age;});

    SVG dynamisch append title-Attribut. Sobald wir bewegen Sie die Maus über den Kreis, es zeigt den Namen, das Alter in kleinen pop-up. Namen, das Alter muss angegeben werden, in test.json.

    InformationsquelleAutor Aravind Cheekkallur
Schreibe einen Kommentar