让我先说一下我是d3的新手。目前，html文件为矩形添加了随机颜色，但我想根据数组中的相应值设置它们。如果有人想要运行它并测试它，我会输入完整的代码。
因此，源，目标，值，颜色数组中的每个元素对应于节点之间链接的源，目标，权重和颜色。我希望链接的颜色被指定为数组项目中的颜色。
我认为我需要做的是将相应的颜色推到链接上（在代码中表示为[ref 1]），但后来我不知道如何在第117-126行中引用该颜色（[参考2]）
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href='http://timelyportfolio.github.io/rCharts_d3_sankey/libraries/widgets/d3_sankey/css/sankey.css'>
<script src='http://timelyportfolio.github.io/rCharts_d3_sankey/libraries/widgets/d3_sankey/js/d3.v3.js' type='text/javascript'></script>
<script src='http://timelyportfolio.github.io/rCharts_d3_sankey/libraries/widgets/d3_sankey/js/sankey.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 960px;
height: 500px;
}
</style>
</head>
<body >
<div id = 'chart8544585455a' class = 'rChart d3_sankey'></div>
<!--Attribution:
Mike Bostock https://github.com/d3/d3-plugins/tree/master/sankey
Mike Bostock http://bost.ocks.org/mike/sankey/
-->
<script>
(function(){
var params = {
"dom": "chart8544585455a",
"width": 960,
"height": 500,
"data": {
"source": [ "A1", "A1", "A2", "A2", "A4", "A4", "A4", "A4", "A5", "B1", "B1", "B1", "B2", "B2", "B2", "B2", "B2", "B2", "B2", "B3", "B3", "B3", "B3", "B4", "B4", "B4", "C1", "C1", "C2", "C2", "C2", "C3", "C4", "C4", "C5", "D1", "D2", "D2", "D2", "D3", "D3", "D3", "D4", "D4", "D4", "D5", "D5", "E1", "E1", "E1", "E2", "E2", "E2", "E2", "E3", "E3", "E3", "E3", "E3", "E3", "E4", "E4", "E4", "E5", "E5", "F1", "F1", "F2", "F2", "F2", "F4", "F4", "F4", "F5", "F5", "F5", "G1", "G2", "H1", "H1", "H1", "H2", "H2", "H3", "H4", "H4", "H4", "H4", "H5", "H5", "H5", "H5", "I2", "I2", "I3", "I3", "I4", "I4", "I5", "I5", "I5", "J1", "J1", "J1", "J2", "J2", "J2", "J2", "J2", "J2", "J3", "J3", "J3", "J3", "J3", "J4", "J4", "J4", "J4", "J5", "J5", "J5" ],
"target": [ "D2", "E2", "D3", "H3", "B5", "H5", "I5", "J5", "E6", "C2", "E2", "F2", "A3", "B3", "D3", "E3", "F3", "H3", "J3", "B4", "E4", "I4", "J4", "D5", "H5", "J5", "B2", "C2", "G3", "H3", "J3", "J4", "C5", "H5", "I6", "J2", "A3", "B3", "G3", "E4", "H4", "J4", "B5", "E5", "I5", "F6", "I6", "A2", "B2", "F2", "A3", "B3", "I3", "J3", "B4", "D4", "E4", "H4", "I4", "J4", "F5", "H5", "J5", "A6", "I6", "B2", "E2", "A3", "B3", "J3", "E5", "H5", "I5", "B6", "D6", "H6", "J2", "D3", "G2", "H2", "J2", "A3", "C3", "D4", "A5", "C5", "E5", "F5", "A6", "F6", "H6", "J6", "E3", "J3", "B4", "E4", "A5", "D5", "C6", "D6", "E6", "D2", "G2", "H2", "B3", "C3", "E3", "F3", "I3", "J3", "A4", "B4", "C4", "D4", "E4", "A5", "B5", "E5", "J5", "G6", "H6", "J6" ],
"value": [ 8, 7, 19, 6, 10, 6, 5, 7, 24, 15, 7, 18, 7, 12, 26, 37, 13, 5, 4, 14, 40, 10, 16, 38, 7, 16, 7, 36, 3, 32, 12, 10, 18, 6, 11, 17, 14, 4, 14, 15, 41, 21, 7, 5, 36, 7, 39, 21, 27, 15, 5, 12, 34, 8, 9, 11, 15, 23, 19, 44, 5, 28, 27, 35, 7, 8, 35, 1, 5, 17, 32, 8, 4, 9, 34, 10, 6, 9, 7, 22, 35, 27, 7, 37, 25, 16, 9, 23, 6, 40, 10, 16, 6, 15, 33, 12, 24, 4, 29, 8, 17, 17, 27, 6, 34, 14, 18, 9, 13, 9, 19, 8, 17, 12, 10, 38, 15, 6, 15, 13, 16, 27 ],
"color": [ "rgb(64, 160, 64)", "rgb(64, 32, 32)", "rgb(160, 224, 96)", "rgb(160, 224, 96)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(192, 96, 128)", "rgb(160, 160, 128)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(128, 64, 192)", "rgb(128, 64, 192)", "rgb(128, 64, 192)", "rgb(224, 96, 64)", "rgb(192, 96, 32)", "rgb(192, 96, 32)", "rgb(192, 96, 32)", "rgb(192, 96, 32)", "rgb(192, 32, 96)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(160, 160, 192)", "rgb(160, 192, 64)", "rgb(160, 192, 64)", "rgb(160, 192, 64)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(192, 96, 32)", "rgb(192, 96, 32)", "rgb(192, 96, 32)", "rgb(128, 64, 192)", "rgb(128, 64, 192)", "rgb(160, 224, 96)", "rgb(128, 192, 32)", "rgb(192, 160, 64)", "rgb(128, 64, 192)", "rgb(128, 64, 192)", "rgb(128, 64, 192)", "rgb(128, 64, 192)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(224, 32, 96)", "rgb(224, 32, 96)", "rgb(32, 128, 192)", "rgb(128, 64, 192)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(224, 32, 96)", "rgb(128, 32, 32)", "rgb(192, 32, 64)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(224, 96, 96)", "rgb(96, 96, 128)", "rgb(64, 160, 64)", "rgb(96, 128, 160)", "rgb(192, 32, 96)", "rgb(96, 128, 160)", "rgb(96, 128, 160)", "rgb(192, 96, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(64, 160, 160)", "rgb(64, 96, 192)", "rgb(128, 64, 192)", "rgb(128, 64, 192)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(192, 96, 32)", "rgb(192, 96, 32)", "rgb(192, 96, 32)", "rgb(160, 192, 64)", "rgb(96, 96, 128)", "rgb(96, 192, 192)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(160, 160, 128)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(128, 192, 32)", "rgb(192, 32, 96)", "rgb(192, 32, 96)", "rgb(192, 32, 96)" ]
},
"nodeWidth": 15,
"nodePadding": 10,
"layout": 32,
"id": "chart8544585455a"
};
params.units ? units = " " + params.units : units = "";
//hard code these now but eventually make available
var formatNumber = d3.format("0,.0f"), // zero decimal places
format = function(d) { return formatNumber(d) + units; },
color = d3.scale.category20();
if(params.labelFormat){
formatNumber = d3.format(".2%");
}
var svg = d3.select('#' + params.id).append("svg")
.attr("width", params.width)
.attr("height", params.height);
var sankey = d3.sankey()
.nodeWidth(params.nodeWidth)
.nodePadding(params.nodePadding)
.layout(params.layout)
.size([params.width,params.height]);
var path = sankey.link();
var data = params.data,
links = [],
nodes = [];
// [ref 1] Push color onto the main array
//get all source and target into nodes
//will reduce to unique in the next step
//also get links in object form
data.source.forEach(function (d, i) {
nodes.push({ "name": data.source[i] });
nodes.push({ "name": data.target[i] });
links.push({ "source": data.source[i], "target": data.target[i], "value": +data.value[i] });
});
//now get nodes based on links data
//thanks Mike Bostock https://groups.google.com/d/msg/d3-js/pl297cFtIQk/Eso4q_eBu1IJ
//this handy little function returns only the distinct / unique nodes
nodes = d3.keys(d3.nest()
.key(function (d) { return d.name; })
.map(nodes));
//it appears d3 with force layout wants a numeric source and target
//so loop through each link replacing the text with its index from node
links.forEach(function (d, i) {
links[i].source = nodes.indexOf(links[i].source);
links[i].target = nodes.indexOf(links[i].target);
});
//now loop through each nodes to make nodes an array of objects rather than an array of strings
nodes.forEach(function (d, i) {
nodes[i] = { "name": d };
});
sankey
.nodes(nodes)
.links(links)
.layout(params.layout);
var link = svg.append("g").selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function (d) { return Math.max(1, d.dy); })
.sort(function (a, b) { return b.dy - a.dy; });
link.append("title")
.text(function (d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
var node = svg.append("g").selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
.origin(function (d) { return d; })
.on("dragstart", function () { this.parentNode.appendChild(this); })
.on("drag", dragmove));
\\[!!!!! ref 2 !!!!]
node.append("rect")
.attr("height", function (d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function (d) { return d3.rgb(d.color).darker(2); })
.append("title")
.text(function (d) { return d.name + "\n" + format(d.value); });
node.append("text")
.attr("x", -6)
.attr("y", function (d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function (d) { return d.name; })
.filter(function (d) { return d.x < params.width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
// the function for moving the nodes
function dragmove(d) {
d3.select(this).attr("transform",
"translate(" + (
d.x = Math.max(0, Math.min(params.width - d.dx, d3.event.x))
) + "," + (
d.y = Math.max(0, Math.min(params.height - d.dy, d3.event.y))
) + ")");
sankey.relayout();
link.attr("d", path);
}
})();
</script>
<script>
// to be specific in case you have more than one chart
d3.selectAll('#chart8544585455a svg path.link')
.style('stroke', function(d){
//here we will use the source color
//if you want target then sub target for source
//or if you want something other than gray
//supply a constant
//or use a categorical scale or gradient
console.log(d.source)
return d.source.color;
})
//note no changes were made to opacity
//to do uncomment below but will affect mouseover
//so will need to define mouseover and mouseout
//happy to show how to do this also
//.style('stroke-opacity', .7)
</script>
</body>
</html>