• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Zwei Knoten nacheinander auswählen und Pfad dazwischen anzeigen.

ja, ich habe es als hierarchy objekt direkt im code stehen...darf man fragen, warum es als hierarchy objekt nicht klappt?

- - - Aktualisiert - - -

es schaut quasi so in der art aus:

HTML: 
data = {
          nodes: [
                  { name: "a"     }, 
                  { name: "b"     },
                  { name: "c"     },
                  { name: "d"     },
                  { name: "e"     },
                  { name: "f"      }
                  ],
        links: [
                  {source: 1,target: 2},
                  {source: 0,target: 1},
                  {source: 3,target: 2},
                  {source: 2,target: 1},
                  {source: 2,target: 1}
                ]
        }
 
Zuletzt bearbeitet von einem Moderator:
milesdavis schrieb:
ja, ich habe es als hierarchy objekt direkt im code stehen...darf man fragen, warum es als hierarchy objekt nicht klappt?
Zum Vergrößern anklicken....
das sind aber keine knoten aus d3.hierarchy sondern einfache js objekte mit der eigenschaft name. wenn du an denen die funktion path aufrufst haben sie die nicht. die bekommen sie erst wenn du sie durch d3.hierarchy wrappst.
 
das würde ja bedeuten, dass man sich strikt an die d3.hierarchy schreibweise halten muss, also so:

HTML: 
{
  "name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {.......

      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    },
    {
      "name": "Azura"
    }
  ]
}

ich könnte quasi mein beispiel

HTML: 
data = {
nodes: [
{ name: "a" },
{ name: "b" },
{ name: "c" },
{ name: "d" },
{ name: "e" },
{ name: "f" }
],
links: [
{source: 1,target: 2},
{source: 0,target: 1},
{source: 3,target: 2},
{source: 2,target: 1},
{source: 2,target: 1}
]
}

gar nicht nutzen und als einfache json-datei speichern?
 
Zuletzt bearbeitet von einem Moderator:
das kannst du ja aber problemlos aus den json daten zusammenbauen.
wenn du stratify nutzt, musst du nur noch vorher das elternelement als parent-eigenschaft hinterlegen, indem du über die links iterierst.
 
tsseh schrieb:
das kannst du ja aber problemlos aus den json daten zusammenbauen.
wenn du stratify nutzt, musst du nur noch vorher das elternelement als parent-eigenschaft hinterlegen, indem du über die links iterierst.
Zum Vergrößern anklicken....
prinzipiell ist das obige richtig:
Code: 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="d3.v4.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var data = {
        nodes: [
          { name: "a" },
          { name: "b" },
          { name: "c" },
          { name: "d" },
          { name: "e" },
          { name: "f" }
        ],
        links: [
          {source: 1,target: 2},
          {source: 0,target: 1},
          {source: 2,target: 3},
          {source: 3,target: 4},
          {source: 4,target: 5}
        ]
      };
      var table = data.links.map(function(l) { return this[l.target].parent = this[l.source].name, this[l.target]; }, data.nodes);
      table.push(data.nodes[data.links.reduce(function(p, n, i) { return data.links.some(function(l) { return l.target == n.source; }) ? p : n; }).source]);
      console.log(table);
      var root = d3.stratify().id(function(d) { return d.name; }).parentId(function(d) { return d.parent; })(table);
      console.log(root);
      var hierarchy = d3.hierarchy(root);
      var nodes = hierarchy.descendants();
      console.log(nodes);
      console.log(nodes[0].path(nodes[5]));
    </script>
  </body>
</html>
allerdings sehe ich gerade, daß du keine einfache baumstruktur hast, damit geht das nicht über hierarchy und du kannst nicht path nutzen, sondern musst dir den suchalgorithmus selber schreiben
 
wie meinst du das? der macht aus deinen beispieldaten ein hierarchy objekt.
allerdings passen deine daten nicht, da sie keinen baum abbilden, sondern kreise enthalten.
 
habe nochmal eine frage...
beim code von d3 v4 path ist gehört der ganze codeblock zur funktion von d3.json(......

warum macht man das eigentlich so?



Code: 
 d3.json("testjson.json", function(root) {
        var hierarchy = d3.hierarchy(root),
            links = hierarchy.links()
            nodes = hierarchy.descendants();
      
        var startNode = null;
        
        var link = svg.append("g")
          .attr("class", "links")
          .selectAll("line")
          .data(links)
          .enter().append("line")
            .style("stroke", "#999")
            .style("stroke-width", "1px");
      
        var node = svg.append("g")
          .attr("class", "nodes")
          .selectAll("circle")
          .data(nodes)
          .enter().append("circle")
            .attr("r", 4.5)
            .style("fill", function(d) { return z(d.parent && d.parent.data.name); })
            .style("stroke", "#000")
            .call(d3.drag()
              .on("start", dragstarted)
              .on("drag", dragged)
              .on("end", dragended))
              .on("click", function(d, i) 
              {
                var path1 = startNode && startNode.path(d) || []; //startNode.path() ruft path-funktion in d3 hierarchy auf 
                startNode = d;
                link.style("stroke", function(d) 
                {
                  return path1.includes(d.source) && path1.includes(d.target) ? "#900" : "#999";
                });
                node.attr("r", function(d) 
                {
                  return path1.includes(d) || startNode == d ? 8 : 4.5; 
                });
              });
      
	  
	  
        simulation
            .nodes(nodes)
            .on("tick", function()
            {
              link
                .attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });
          
              node
                .attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
            });
      
        simulation.force("link")
            .links(links);
        
      });



ich habe bei mir die funktion so geschrieben:

Code: 
code....

 /*d3.json("testjson.json", function(root) {
        var hierarchy = d3.hierarchy(root),
            links = hierarchy.links()
            nodes = hierarchy.descendants();


});


code...

und es klappte nicht...die konsole sagt:

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
 
Zuletzt bearbeitet:
tsseh schrieb:
das ist nicht nur in v4 so, das ist immer so



weil d3.json einen asyncronen request startet und du den code erst ausführen kannst, wenn die daten da sind.
Zum Vergrößern anklicken....

Sag mal, die Variablendeklaration von
Code: 
var svg......
und
Code: 
var force...
kommen immer ausserhalb des
Code: 
 d3.json(....
codeblocks?
Er meckert nämlich, wenn die beiden innerhalb des codeblocks vorkommen. Was ist daran falsch?
 
Zuletzt bearbeitet:
ja, kein wunder, dass es nicht klappt :)
müsste doch einfach funktionieren, wenn man einfach v4 einbindet...oder gibt es da weitere maßnahmen, die ergriffen werden müssen?
 
ah, ok...schade, denn scheinbar gibt es d3.layout.force() nur in v3 und in v4 heisst das nun d3.forceSimulation()...
fällt dir als d3 kenner auf die schnelle eine funktion wie die "path" funktion aus d3 v4 ein, die sich mit d3 v3 umsetzen lässt?
 
- - - Aktualisiert - - -

Ich nutze nun den "d3 v4 path" code mit dieser json datei:

Code: 
{
  "name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {
      "name": "Seth",
      "children": [
        {
          "name": "Enos"
        },
        {
          "name": "Noam"
        }
      ]
    },
    {
      "name": "Abel"
    },
    {
      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    }
  ]
}

was auch gut klappt. Nun aber würde ich gern mir die namen an die nodes anzeigen lassen.

Dazu habe ich in d3 v3 immer folgendes benutzt:

Code: 
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 });

was hier aber nicht klappt :)
Kannst du mir nochmal helfen? er zeigt mir jedoch in der konsole keinen fehler an, sondern hängt den text einfach nicht an die nodes.
Gruss
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben