Farbe ändern von Knotengruppen in einem d3.js Kraftknoten Leinwand Layout

Question

ich gezwungen Graph haben:

var canvas = document.querySelector("canvas"), 
     context = canvas.getContext("2d"), 
     width = canvas.width, 
     height = canvas.height, 
     min = 5; 

var simulation = d3.forceSimulation() 
     .force("link", d3.forceLink() 
       .id(function(d) { return d.id; }) 
       .iterations(2) 
       .distance(function(d) { 
        return Math.sqrt((600 - d.value))/10; 
       }) 
       .strength(8) 
     ) 
     .force("charge", d3.forceManyBody() 
       .strength(-300) 
       .theta(0.9) 
       .distanceMax(400) 
     ) 
     .force("center", d3.forceCenter(width/2, height/2) 
     ) 
     .force("collision", d3.forceCollide(1)) 
     ; 


d3.json("/contigderivatives/data/", function(error, graph) { 
    if (error) throw error; 

    simulation 
      .nodes(graph.nodes) 
      .on("tick", ticked); 

    simulation.force("link") 
      .links(graph.links); 

    d3.select(canvas) 
      .call(d3.drag() 
        .container(canvas) 
        .subject(dragsubject) 
        .on("start", dragstarted) 
        .on("drag", dragged) 
        .on("end", dragended)); 

    function ticked() { 
     context.clearRect(0, 0, width, height); 

     context.beginPath(); 
     graph.links.forEach(drawLink); 
     context.strokeStyle = "#aaa"; 
     context.stroke(); 

     context.beginPath(); 
     graph.nodes.forEach(drawNode); 
     context.strokeStyle = "#fff"; 
     context.fillStyle = 'steelblue'; 
     context.stroke(); 
     context.fill(); 
    } 
    function dragsubject() { 
     return simulation.find(d3.event.x, d3.event.y); 
    } 
}); 

function dragstarted() { 
    if (!d3.event.active) simulation.alphaTarget(0.1).restart(); 
    d3.event.subject.fx = d3.event.subject.x; 
    d3.event.subject.fy = d3.event.subject.y; 
} 

function dragged() { 
    d3.event.subject.fx = d3.event.x; 
    d3.event.subject.fy = d3.event.y; 
} 

function dragended() { 
    if (!d3.event.active) simulation.alphaTarget(0); 
    d3.event.subject.fx = null; 
    d3.event.subject.fy = null; 
} 

function drawLink(d) { 
    context.moveTo(d.source.x, d.source.y); 
    context.lineTo(d.target.x, d.target.y); 
} 

function drawNode(d){ 
    d.x = Math.max(min, Math.min(width - min, d.x)); 
    d.y = Math.max(min, Math.min(height - min, d.y)); 
    context.moveTo(d.x + 3, d.y); 
    context.arc(d.x, d.y, 3, 0, 2 * Math.PI); 
} 

Ich versuche, die Farbe der Knoten basierend zu ändern auf einer Gruppierung, die in der angegeben wird JSON, das ist eine ganze Zahl, wobei 0 = rot, 1 = blau. Es gibt viele Beispiele, wie man die Stile eines Knotens ändern kann, wenn man SVGs verwendet, aber es gibt nicht viel, wenn man ein Canvas benutzt. Das Ändern der Zeile context.fillStyle = 'steelblue'; ändert die Füllfarbe für alle Knoten. Wie ändert man den Stil und die Attribute einzelner Knoten, wenn eine Zeichenfläche verwendet wird?

Answer 1

machte ich eine Farbskala

var color = d3.scaleOrdinal(d3.schemeCategory10); 

Dann auf jeder Farbe Knoten zeichnet ich auf der Basis von Knotendaten Eigenschaften:

function drawNode(d) { 
    context.beginPath();//for each node do begin path as context fill style and stroke are different. 
    context.moveTo(d.x + 3, d.y); 
    context.arc(d.x, d.y, 3, 0, 2 * Math.PI); 
    context.fillStyle = color(d.group);//coloring on the basis of the group 
    context.strokeStyle = color(d.group); 
    context.fill(); 
    context.stroke(); 
    } 

Basierend auf dem bl.ock Diagramm, das Sie in dem Kommentar bezeichnet Ich habe ein kleines Arbeitsbeispiel gemacht here

Hoffe das behebt Ihr Problem.