Farbspezifische Links auf D3 Sankey Diagramm

Wir benötigen Hilfe Färbung der spezifischen Links dieses Sankey Diagramm. Wir wollen, dass die Verbindungen, die mit "Raleigh" verbunden sind, grün sind, alle anderen bleiben grau. HierFarbspezifische Links auf D3 Sankey Diagramm

ist ein Bild, wie es aussieht, gefolgt von einem Bild von dem, was wo die grünen Links gehen:

Sankey Now Sankey Future

Wir sind neu in d3 und kann einfach nicht einen Reim raus, jede Hilfe wäre toll !!

var svg = d3.select("svg").attr("style", "outline: thin solid grey;"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"); 

var formatNumber = d3.format(",.0f"), 
    format = function(d) { return formatNumber(d) + " TWh"; }, 
    color = d3.scaleOrdinal(d3.schemeCategory10); 

var school = {"nodes": [ 




{"name":"Happiness Index"}, // 0 
{"name":"Business Cost Index"}, // 1 
{"name":"Home Price to Income"}, // 2 
{"name":"Population Growth"}, // 3 
{"name":"3 Year GDP Growth"}, // 4 
{"name":"Percent with Degree"}, // 5 


{"name":"Austin"}, // 6 
{"name":"Nashville"}, // 7 
{"name":"Atlanta"}, // 8 
{"name":"Raleigh"}, // 9 
{"name":"Washington DC"}, // 10 

], 
"links":[ 


// From Happiness 
    {"source":0,"target":6,"value":97}, 
    {"source":0,"target":9,"value":100}, 
    {"source":0,"target":10,"value":96}, 


// From Business Cost 
    {"source":1,"target":9,"value":87}, 
    {"source":1,"target":8,"value":88}, 
    {"source":1,"target":7,"value":99}, 

// From PTI 
    {"source":2,"target":8,"value":86}, 



// From Pop Growth 
    {"source":3,"target":9,"value":87}, 
    {"source":3,"target":6,"value":94}, 

// From 3yrgdp 
    {"source":4,"target":9,"value":100}, 
    {"source":4,"target":6,"value":88}, 
    {"source":4,"target":7,"value":96}, 

// From percent undergrad 
    {"source":5,"target":9,"value":85}, 
    {"source":5,"target":10,"value":100}, 
]}; 

var sankey = d3.sankey() 
    .nodeWidth(15) 
    .nodePadding(10) 
    .extent([[1, 1], [width - 1, height - 6]]); 

var link = svg.append("g") 
    .attr("class", "links") 
    .attr("fill", "none") 
    .attr("stroke", "#000") 
    .attr("stroke-opacity", 0.2) 
    .selectAll("path"); 

var node = svg.append("g") 
    .attr("class", "nodes") 
    .attr("font-family", "sans-serif") 
    .attr("font-size", 15) 
    .selectAll("g"); 

sankey(school); 

link = link 
    .data(school.links) 
    .enter().append("path") 
     .attr("d", d3.sankeyLinkHorizontal()) 
     .attr("stroke-width", function(d) { return Math.max(1, d.width); }) 


// link hover values 
link.append("title") 
     .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); }); 

node = node 
    .data(school.nodes) 
    .enter().append("g"); 

node.append("rect") 
     .attr("x", function(d) { return d.x0; }) 
     .attr("y", function(d) { return d.y0; }) 
     .attr("height", function(d) { return d.y1 - d.y0; }) 
     .attr("width", function(d) { return d.x1 - d.x0; }) 
     .attr("fill", function(d) { return color(d.name.replace(/ .*/, "")); }) 
     .attr("stroke", "#000"); 

node.append("text") 
     .attr("x", function(d) { return d.x0 - 6; }) 
     .attr("y", function(d) { return (d.y1 + d.y0)/2; }) 
     .attr("dy", "0.35em") 
     .attr("text-anchor", "end") 
     .text(function(d) { return d.name; }) 
    .filter(function(d) { return d.x0 < width/2; }) 
     .attr("x", function(d) { return d.x1 + 6; }) 
     .attr("text-anchor", "start"); 

svg.append("text") 
     .attr("x", 10) 
     .attr("y", 30) 
     .attr("class", "graphTitle") 
     .text(" "); 

svg.append("text") 
     .attr("x", width - 80) 
     .attr("y", height - 10)

Quelle

2017-11-30 ccny18

Links zu den Grafiken: Jetzt Sankey - https://ibb.co/hAMs5G Sankey Zukunft - https://ibb.co/gJSz4b – ccny18

Ändern Sie die Links zu:

link = link 
    .data(school.links) 
    .enter().append("path") 
    .attr("d", d3.sankeyLinkHorizontal()) 
    .attr("stroke-width", function(d) { return Math.max(1, d.width); }) 
    .style("stroke", function(d){ 
     return d.target.name == "Raleigh" ? "green" : "gray"; 
    });

Laufcode:

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script src="https://d3js.org/d3.v4.js"></script> 
 
    <script src="https://unpkg.com/[email protected]/build/d3-sankey.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <svg width="500" height="500"></svg> 
 
    <script> 
 
     var svg = d3.select("svg").attr("style", "outline: thin solid grey;"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"); 
 

 
var formatNumber = d3.format(",.0f"), 
 
    format = function(d) { return formatNumber(d) + " TWh"; }, 
 
    color = d3.scaleOrdinal(d3.schemeCategory10); 
 

 
var school = {"nodes": [ 
 

 

 

 

 
{"name":"Happiness Index"}, // 0 
 
{"name":"Business Cost Index"}, // 1 
 
{"name":"Home Price to Income"}, // 2 
 
{"name":"Population Growth"}, // 3 
 
{"name":"3 Year GDP Growth"}, // 4 
 
{"name":"Percent with Degree"}, // 5 
 

 

 
{"name":"Austin"}, // 6 
 
{"name":"Nashville"}, // 7 
 
{"name":"Atlanta"}, // 8 
 
{"name":"Raleigh"}, // 9 
 
{"name":"Washington DC"}, // 10 
 

 
], 
 
"links":[ 
 

 

 
// From Happiness 
 
    {"source":0,"target":6,"value":97}, 
 
    {"source":0,"target":9,"value":100}, 
 
    {"source":0,"target":10,"value":96}, 
 

 

 
// From Business Cost 
 
    {"source":1,"target":9,"value":87}, 
 
    {"source":1,"target":8,"value":88}, 
 
    {"source":1,"target":7,"value":99}, 
 

 
// From PTI 
 
    {"source":2,"target":8,"value":86}, 
 

 

 

 
// From Pop Growth 
 
    {"source":3,"target":9,"value":87}, 
 
    {"source":3,"target":6,"value":94}, 
 

 
// From 3yrgdp 
 
    {"source":4,"target":9,"value":100}, 
 
    {"source":4,"target":6,"value":88}, 
 
    {"source":4,"target":7,"value":96}, 
 

 
// From percent undergrad 
 
    {"source":5,"target":9,"value":85}, 
 
    {"source":5,"target":10,"value":100}, 
 
]}; 
 

 
var sankey = d3.sankey() 
 
    .nodeWidth(15) 
 
    .nodePadding(10) 
 
    .extent([[1, 1], [width - 1, height - 6]]); 
 

 
var link = svg.append("g") 
 
    .attr("class", "links") 
 
    .attr("fill", "none") 
 
    .attr("stroke", "#000") 
 
    .attr("stroke-opacity", 0.2) 
 
    .selectAll("path"); 
 

 
var node = svg.append("g") 
 
    .attr("class", "nodes") 
 
    .attr("font-family", "sans-serif") 
 
    .attr("font-size", 15) 
 
    .selectAll("g"); 
 

 
sankey(school); 
 

 
link = link 
 
    .data(school.links) 
 
    .enter().append("path") 
 
    .attr("d", d3.sankeyLinkHorizontal()) 
 
    .attr("stroke-width", function(d) { return Math.max(1, d.width); }) 
 
    .style("stroke", function(d){ 
 
     return d.target.name == "Raleigh" ? "green" : "gray"; 
 
    }) 
 

 

 
// link hover values 
 
link.append("title") 
 
     .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); }); 
 

 
node = node 
 
    .data(school.nodes) 
 
    .enter().append("g"); 
 

 
node.append("rect") 
 
     .attr("x", function(d) { return d.x0; }) 
 
     .attr("y", function(d) { return d.y0; }) 
 
     .attr("height", function(d) { return d.y1 - d.y0; }) 
 
     .attr("width", function(d) { return d.x1 - d.x0; }) 
 
     .attr("fill", function(d) { return color(d.name.replace(/ .*/, "")); }) 
 
     .attr("stroke", "#000"); 
 

 
node.append("text") 
 
     .attr("x", function(d) { return d.x0 - 6; }) 
 
     .attr("y", function(d) { return (d.y1 + d.y0)/2; }) 
 
     .attr("dy", "0.35em") 
 
     .attr("text-anchor", "end") 
 
     .text(function(d) { return d.name; }) 
 
    .filter(function(d) { return d.x0 < width/2; }) 
 
     .attr("x", function(d) { return d.x1 + 6; }) 
 
     .attr("text-anchor", "start"); 
 

 
svg.append("text") 
 
     .attr("x", 10) 
 
     .attr("y", 30) 
 
     .attr("class", "graphTitle") 
 
     .text(" "); 
 

 
svg.append("text") 
 
     .attr("x", width - 80) 
 
     .attr("y", height - 10) 
 
    </script> 
 
    </body> 
 

 
</html>

Quelle

2017-11-30 15:27:19 Mark

Danke, arbeitete wie ein Charme !! – ccny18

Farbspezifische Links auf D3 Sankey Diagramm

Antwort

Verwandte Themen