2017-12-31 38 views
0

Ich möchte den Knotenstil basierend auf seiner Größe ändern. In dem gegebenen Beispiel möchte ich Knoten rot markieren, der Zoomfaktor liegt unter 0,5, ansonsten die Gruppenfarbe verwenden. Ich habe den folgenden Code versucht, aber er gibt eine Fehlermeldung zurück: null ist kein Objekt (d3.event.transform). Nach dem Fehlercode, denke ich d3.event.transform ist noch nicht initialisiert.Wie wird der Knotenstil beim Zoomen aktualisiert?

Gibt es eine Möglichkeit, den Zoomfaktor innerhalb der Node-Style-Funktion zu erhalten?

var node = pane.append("g") 
    .attr("class", "nodes") 
    .selectAll("circle") 
    .data(graph.nodes) 
    .enter().append("circle") 
    .attr("class", "node") 
    .attr("r", function(d) { return d.value*5 }) 
    .style("fill", function(d) { 
      return (d3.event.transform.k < 0.5) ? "red": color(d.group); 
    }); 
+0

Würde es Ihnen etwas ausmachen, ein Code-Snippet, ein JSfiddle oder etwas Ähnliches zu erstellen, um es Ihnen leichter zu machen, Ihnen zu helfen? vgl. https://stackoverflow.com/help/mcve –

Antwort

0

ich es geschafft, schließlich haben sie arbeiten, node.on ("Zoom", ...) funktionierte nicht für mich, aber seine Funktion innerhalb der gezoomten Funktion machte den Trick. Ich nehme an, dass Knoten keine Zoom-Ereignisse erhalten, wahrscheinlich weil die Aufruf- (Zoom-) Funktion an den gesamten Graphen angehängt ist.

function zoomed() { 
    d3.selectAll('circle').style('fill', function(d) { 
     return (d.value > d3.event.transform.k) ? 'red': color(d.group); 
    }) 
    pane.attr("transform", d3.event.transform); 
} 

Knoten größer ist als eine der Zoom-Skala in rot gefärbt bekommen (Geige here). Dies ist möglicherweise nicht die beste Lösung, vor allem für große Grafiken, aber diese Arbeit.

2

Der gemeinsame Codeauszug ist nicht vollständig, aber ich denke, dass dies dem Code entspricht bei der ersten Generation der Zeichnung verwendet, und es ist nicht in einem Hörer des ‚Zoom‘ Ereignis eingewickelt.

Was getan werden sollte, ist:

  1. initizalize mit der Standardfarbe
  2. Update die Füllfarbe auf Zoom Ereignis der Zeichnung.

Aktualisiert Code:

die Zeichnung initialisieren:

var node = pane.append("g") 
    .attr("class", "nodes") 
    .selectAll("circle") 
    .data(graph.nodes) 
    .enter().append("circle") 
    .attr("class", "node") 
    .attr("r", function(d) { return d.value*5 }) 
    .style("fill", function(d) { 
      return color(d.group); 
    }); 

Dann der Zoom Ereignis hören:

node.on('zoom', function() { 
    node.selectAll('circle') 
     .style('fill', function(d) { 
     return (d3.event.transform.k < 0.5) ? 'red': color(d.group); 
    }) 
}) 
+0

Hier ist eine Geige https://jsfiddle.net/pducrot/tokbs3vg/#&togetherjs=9D6U8g2qnD – Pierre

+0

Knoten haben unterschiedliche Größen, ich möchte ihren Stil ändern, wenn sie eine erreichen B. die Knotenbezeichnung anzeigen oder die Knotenfarbe ändern. Ihre Größe basiert auf d.value. Ich habe versucht, eine Funktion auf den Knoten-Stil und in der gezoomten Funktion hinzuzufügen, aber es funktioniert nicht. Die Zoomfunktion kennt die Knoten nicht, die ich vermute. – Pierre

+0

Ich habe deinen Vorschlag in der Geige versucht, es scheint nicht zu funktionieren. Es scheint die Zoom-Funktion überhaupt nicht zu aktivieren (console.log (d3.event.transform.k)). Die Call (Zoom) -Funktion ist auf der , sollte es auch der Knoten sein? – Pierre

Verwandte Themen