D3-force-layout: Wie kann ich die Größe von jedem Knoten?

Ich bin mit dem erstaunlichen D3JS zu bauen, graph. Die Grafik ist gerendert, aber ich möchte, dass meine Knoten haben jeweils eine Größe.

Werden die Daten in dieser form :

{Quelle: "Antony Hoppkins", target: "Woody Allen", Wert: 3}

Hier der code :

var links = graph.links;
var nodes = {};

links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var width = 1200,
    height = 1500;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(50)
    .charge(-200)
    .on("tick", tick)
    .start();

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

var link = svg.selectAll(".link")
    .data(force.links())
  .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .style("stroke-width", function(d) { return (d.value)*5; })
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .call(force.drag);

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

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

function tick() {
  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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function mouseover() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 10)
      ;
}

function mouseout() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 5)
      ;
}

Irgendwelche Gedanken ?

InformationsquelleAutor occulti | 2013-12-21
  1. 12

    Ich gehe davon aus, dass Sie möchten, um die Größe der einzelnen Knoten (z.B. radius) nach .value. Sie tun dies wie folgt:

    node.append("circle")
  .attr("r", function(d) { return d.value * 3; });

    Können Sie natürlich passen Sie den Faktor, oder verwenden Sie eine Skala statt.

    • Es schon versucht. Dies ist, was ich bekomme : Error: Invalid value for <circle> attribute r="NaN" ich habe sogar Hinzugefügt, eine parseInt(d.value) aber vergeblich.
    • Könnte Sie post ein komplettes lauffähiges Beispiel, bitte?
    • Wenn immer ein funktionsfähiges Beispiel für die Ausführung nicht möglich ist, mindestens nach, was die Datenstruktur aussieht, wenn Sie function(d) { console.log(d); console.log(d.value) }. Die meisten d3-layout-Methoden erstellen eine d.value - Objekt mit den original-Daten; wenn Sie Ihre original-Daten wurde auch ein Objekt mit ein .value-Attribut, die Sie möglicherweise verwenden müssen d.value.value.
    InformationsquelleAutor Lars Kotthoff
  2. 3

    Ich bin auf der Suche nach dieser und auch versucht, Abhilfe es ein wenig.
    Ich denke, dass jedes Objekt in Ihrer Datenbank eine eindeutige id (oder einfach Durchlaufen). Dann in deinem code auf node Objekt könnten Sie etwas schreiben wie dieses:

    var node = svg.selectAll(".node")
    .data(graph.nodes)
    .attr("r", function(d){
        if (d.value === myUniqueId){
          return 3;
    } else {
          return 10;
    }
})

    hier die "r" ist für die radious.Die value ist der name meiner db (es kann alles sein, was Sie wollen). Dort können Sie die Knoten-Größen.
    Ich weiß, es ist kein sauberer code, aber ich bin einfach ein Neuling.
    Hoffe, es hilft!

    InformationsquelleAutor cs.matyi
Schreibe einen Kommentar