Javascript 处理d3.js和x27中的颜色；s弦图
我发现了一个很好的和弦图的例子，显示了Über游乐设施： 下面是使用的代码（此处完全可用：）：Javascript 处理d3.js和x27中的颜色；s弦图,javascript,d3.js,svg,gradient,chord-diagram,Javascript,D3.js,Svg,Gradient,Chord Diagram,我发现了一个很好的和弦图的例子，显示了Über游乐设施： 下面是使用的代码（此处完全可用：）： #工具提示{ 颜色：白色； 不透明度：.5； 背景：#333； 填充物：5px； 边框：10px实心浅灰色； 边界半径：5px； 位置：绝对位置； z指数：10； 可见性：隐藏； 空白：nowrap； 指针事件：无； } #圆圈{ 填充：无； 指针事件：全部； } 路径组{ 填充不透明度：。； } 和弦{ 填充不透明度：.65； 行程：#000； 笔划宽度：.000000 25px； } #圆圈：悬
#工具提示{
颜色：白色；
不透明度：.5；
背景：#333；
填充物：5px；
边框：10px实心浅灰色；
边界半径：5px；
位置：绝对位置；
z指数：10；
可见性：隐藏；
空白：nowrap；
指针事件：无；
}
#圆圈{
填充：无；
指针事件：全部；
}
路径组{
填充不透明度：。；
}
和弦{
填充不透明度：.65；
行程：#000；
笔划宽度：.000000 25px；
}
#圆圈：悬停路径。淡入淡出{
显示：无；
}
//*******************************************************************
//创建矩阵和映射
//*******************************************************************
队列（）
.defer（d3.json，“data/EP matrix.json”）
.defer（d3.csv，“data/EP cities.csv”）
.await（函数（err，矩阵，mmap）{
if（err）console.log（err）；
_.each（mmap，函数（d，i）{d.id=i；d.data=d.color}）
和弦（矩阵，mmap）；
});
//*******************************************************************
//画和弦图
//*******************************************************************
函数和弦（矩阵，mmap）{
var w=1300，h=1300，r1=h/2，r0=r1-110；
var chord=d3.layout.chord（）
.padding（.02）
.sortSubgroups（d3.降序）
.sortChords（d3.下降）；
var arc=d3.svg.arc（）
.内半径（r0）
.外层（r0+20）；
var svg=d3.select（“body”）.append（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“id”、“圆圈”）
.attr（“转换”、“转换”（+w/2+）、“+h/2+”）；
svg.append（“圆”）
.attr（“r”，r0+20）；
var rdr=chordRdr（矩阵，mmap）；
和弦矩阵（矩阵）；
var g=svg.selectAll（“g.group”）
.data（chord.groups（））
.enter（）.append（“svg:g”）
.attr（“类”、“组”）
.on（“鼠标悬停”，鼠标悬停）
.on（“mouseout”，函数（d）{d3.select（“工具提示”）.style（“可见性”、“隐藏”）}）；
g、 追加（“svg:path”）
.style（“笔划”、“灰色”）
.style（“fill”，函数（d）{return rdr（d）.gdata；}）
.attr（“d”，弧）；
g、 追加（“svg:文本”）
.each（函数（d）{d.angle=（d.startAngle+d.endAngle）/2；}）
.attr（“dy”，“.35em”）
.style（“字体系列”、“helvetica、arial、无衬线”）
.style（“字体大小”，“9px”）
.attr（“文本锚定”，函数（d）{return d.angle>Math.PI？“end”：null；}）
.attr（“转换”，函数（d）{
返回“旋转（“+（d.angle*180/Math.PI-90）+”）
+“翻译（“+（r0+26）+”）
+（d.angle>Math.PI？“旋转（180）”：“”）；
})
.text（函数（d）{return rdr（d）.gname；}）；
var chordPaths=svg.selectAll（“path.chord”）
.data（chord.chords（））
.enter（）.append（“svg:path”）
.attr（“类”、“和弦”）
.style（“笔划”、“灰色”）
.style（“fill”，函数（d）{return}.where（mmap，{id:d.source.index}）[0].data；；}）
.attr（“d”，d3.svg.chord（）.radius（r0））
.on（“鼠标悬停”，功能（d）{
d3.选择（“工具提示”）
.style（“可见性”、“可见”）
.html（chordTip（rdr（d）））
.style（“top”，函数（）{return（d3.event.pageY-100）+“px”}）
.style（“左”，函数（）{return（d3.event.pageX-100）+“px”}）
})
.on（“mouseout”，函数（d）{d3.select（“工具提示”）.style（“可见性”、“隐藏”）}）；
函数chordTip（d）{
var p=d3.格式（“.1%”），q=d3.格式（“，.2r”）
返回“和弦信息：
”
+d.sname+”→ " + d、 名称
+“：”+p（d.S值）+“
”
+d.tname+”→ “+d.sname
+“：”+p（d.T值）+“
”；
}
功能组提示（d）{
var p=d3.格式（“.1%”），q=d3.格式（“，.2r”）
return“组信息：
”
+d.gname+“：“+p（d.gvalue）+”
”；
}
功能鼠标盖（d，i）{
d3.选择（“工具提示”）
.style（“可见性”、“可见”）
.html（groupTip（rdr（d）））
.style（“top”，函数（）{return（d3.event.pageY-80）+“px”}）
.style（“左”，函数（）{return（d3.event.pageX-130）+“px”}）
和弦路径分类（“淡入”，功能（p）{
返回p.source.index！=i
&&p.target.index！=i；
});
}
}
如果我想显示无向数据呢？有没有办法将两种颜色从起点和终点混合在一起？或者更好的办法是将和弦颜色从起点线性淡入终点？是的，这两种方法都是可能的。你可能想要后者的颜色。好消息！你知道如何实现吗上面代码中的渐变？我猜我应该更改“.style”（“fill”，function（d）{return rdr（d）.gdata；}）”但我不太确定如何继续…对不起，我的意思是：“.style”（“fill”，function（d）{return{where（mmap，{id:d.source）”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#tooltip {
color: white;
opacity: .5;
background: #333;
padding: 5px;
border: 10px solid lightgrey;
border-radius: 5px;
position: absolute;
z-index: 10;
visibility: hidden;
white-space: nowrap;
pointer-events: none;
}
#circle circle {
fill: none;
pointer-events: all;
}
path.group {
fill-opacity: .;
}
path.chord {
fill-opacity: .65;
stroke: #000;
stroke-width: .00000025px;
}
#circle:hover path.fade {
display: none;
}
</style>
</head>
<body>
<div id="tooltip"></div>
<script src="lib/d3.js"></script>
<script src="lib/queue.js"></script>
<script src="lib/underscore.js"></script>
<script src="js/mapper.js"></script>
<script>
//*******************************************************************
// CREATE MATRIX AND MAP
//*******************************************************************
queue()
.defer(d3.json, 'data/EP-matrix.json')
.defer(d3.csv, 'data/EP-cities.csv')
.await(function(err, matrix, mmap) {
if (err) console.log(err);
_.each(mmap, function (d, i) { d.id=i; d.data=d.color })
drawChords(matrix, mmap);
});
//*******************************************************************
// DRAW THE CHORD DIAGRAM
//*******************************************************************
function drawChords (matrix, mmap) {
var w = 1300, h = 1300, r1 = h / 2, r0 = r1 - 110;
var chord = d3.layout.chord()
.padding(.02)
.sortSubgroups(d3.descending)
.sortChords(d3.descending);
var arc = d3.svg.arc()
.innerRadius(r0)
.outerRadius(r0 + 20);
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("id", "circle")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
svg.append("circle")
.attr("r", r0 + 20);
var rdr = chordRdr(matrix, mmap);
chord.matrix(matrix);
var g = svg.selectAll("g.group")
.data(chord.groups())
.enter().append("svg:g")
.attr("class", "group")
.on("mouseover", mouseover)
.on("mouseout", function (d) { d3.select("#tooltip").style("visibility", "hidden") });
g.append("svg:path")
.style("stroke", "grey")
.style("fill", function(d) { return rdr(d).gdata; })
.attr("d", arc);
g.append("svg:text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.style("font-family", "helvetica, arial, sans-serif")
.style("font-size", "9px")
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (r0 + 26) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");
})
.text(function(d) { return rdr(d).gname; });
var chordPaths = svg.selectAll("path.chord")
.data(chord.chords())
.enter().append("svg:path")
.attr("class", "chord")
.style("stroke", "grey")
.style("fill", function(d) { return _.where(mmap, {id: d.source.index })[0].data;; })
.attr("d", d3.svg.chord().radius(r0))
.on("mouseover", function (d) {
d3.select("#tooltip")
.style("visibility", "visible")
.html(chordTip(rdr(d)))
.style("top", function () { return (d3.event.pageY - 100)+"px"})
.style("left", function () { return (d3.event.pageX - 100)+"px";})
})
.on("mouseout", function (d) { d3.select("#tooltip").style("visibility", "hidden") });
function chordTip (d) {
var p = d3.format(".1%"), q = d3.format(",.2r")
return "Chord Info:<br/>"
+ d.sname + " → " + d.tname
+ ": " + p(d.svalue) + "<br/>"
+ d.tname + " → " + d.sname
+ ": " + p(d.tvalue) + "<br/>";
}
function groupTip (d) {
var p = d3.format(".1%"), q = d3.format(",.2r")
return "Group Info:<br/>"
+ d.gname + " : " + p(d.gvalue) + "<br/>";
}
function mouseover(d, i) {
d3.select("#tooltip")
.style("visibility", "visible")
.html(groupTip(rdr(d)))
.style("top", function () { return (d3.event.pageY - 80)+"px"})
.style("left", function () { return (d3.event.pageX - 130)+"px";})
chordPaths.classed("fade", function(p) {
return p.source.index != i
&& p.target.index != i;
});
}
}
</script>
</body>
</html>