Wie wird der Knotenstil beim Zoomen aktualisiert?

Question

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.

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

Answer 1

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.

Answer 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); 
    }) 
})