D3.js 如何在d3分层边缘绑定中突出显示源节点及其所有目标节点和相应链接
我是D3JS的初学者。我已经创建了一个d3层次边缘绑定可视化。现在我正在尝试这样做：每当我将鼠标移到任何节点上（鼠标移到事件上），其所有目标节点和相应的链接都必须高亮显示。如何做到这一点？ 我目前的代码是：D3.js 如何在d3分层边缘绑定中突出显示源节点及其所有目标节点和相应链接,d3.js,D3.js,我是D3JS的初学者。我已经创建了一个d3层次边缘绑定可视化。现在我正在尝试这样做：每当我将鼠标移到任何节点上（鼠标移到事件上），其所有目标节点和相应的链接都必须高亮显示。如何做到这一点？ 我目前的代码是： <html> <head> <style> .node { font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
<html>
<head>
<style>
.node {
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
stroke: steelblue;
stroke-opacity: .4;
fill: none;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var classes=[
{"name":"a","size":3938,"imports":["b","f"]},
{"name":"b","size":3938,"imports":[]},
{"name":"c","size":3938,"imports":["a"]},
{"name":"d","size":3938,"imports":[]},
{"name":"e","size":3938,"imports":[]},
{"name":"f","size":3938,"imports":[]}
];
var diameter = 960,
radius = diameter / 2,
innerRadius = radius - 120;
var cluster = d3.layout.cluster()
.size([360, innerRadius]);
var bundle = d3.layout.bundle();
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(.85)
.radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; });
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
var nodes = cluster.nodes(packageHierarchy(classes)),
links = packageImports(nodes);
svg.selectAll(".link")
.data(bundle(links))
.enter().append("path")
.attr("class", "link")
.attr("d", line);
svg.selectAll(".node")
.data(nodes.filter(function(n) { return !n.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.append("text")
.attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
.text(function(d) { return d.key; });
// Lazily construct the package hierarchy from class names.
function packageHierarchy(classes) {
var map = {};
function find(name, data) {
var node = map[name], i;
if (!node) {
node = map[name] = data || {name: name, children: []};
if (name.length) {
node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
node.parent.children.push(node);
node.key = name.substring(i + 1);
}
}
return node;
}
classes.forEach(function(d) {
find(d.name, d);
});
return map[""];
}
// Return a list of imports for the given array of nodes.
function packageImports(nodes) {
var map = {},
imports = [];
// Compute a map from name to node.
nodes.forEach(function(d) {
map[d.name] = d;
});
// For each import, construct a link from the source to target node.
nodes.forEach(function(d) {
if (d.imports) d.imports.forEach(function(i) {
imports.push({source: map[d.name], target: map[i]});
});
});
return imports;
}
</script>
</body>
</html>
.节点{
字体：11px“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.链接{
笔画：钢蓝；
笔画不透明度：.4；
填充：无；
}
变量类=[
{“名称”：“a”，“尺寸”：3938，“进口”：[“b”，“f”]}，
{“名称”：“b”，“大小”：3938，“导入”：[]}，
{“name”：“c”，“size”：3938，“imports”：[“a”]}，
{“名称”：“d”，“大小”：3938，“导入”：[]}，
{“名称”：“e”，“大小”：3938，“导入”：[]}，
{“名称”：“f”，“大小”：3938，“导入”：[]}
];
变量直径=960，
半径=直径/2，
内半径=半径-120；
var cluster=d3.layout.cluster（）
.尺寸（[360，内半径]）；
var bundle=d3.layout.bundle（）；
var line=d3.svg.line.radial（）
.插入（“束”）
.张力（.85）
.radius（函数（d）{返回d.y；}）
.angle（函数（d）{返回d.x/180*Math.PI；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.附加（“g”）
.attr（“变换”、“平移”（“+radius+”，“+radius+”））；
var nodes=cluster.nodes（packageHierarchy（classes）），
链接=packageImports（节点）；
svg.selectAll（“.link”）
.数据（捆绑（链接））
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，行）；
svg.selectAll（“.node”）
.data（nodes.filter（函数（n）{return！n.children；}））
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{return”旋转（“+（d.x-90）+”）平移（“+d.y+”）；}）
.append（“文本”）
.attr（“dx”，函数（d）{返回d.x<180？8:-8；}）
.attr（“dy”，“.31em”）
.attr（“文本锚定”，函数（d）{返回d.x<180？“开始”：“结束”}）
.attr（“transform”，函数（d）{返回d.x<180？null:“rotate（180）”；}）
.text（函数（d）{return d.key；}）；
//从类名惰性地构造包层次结构。
函数包层次结构（类）{
var-map={}；
函数查找（名称、数据）{
var node=map[name]，i；
如果（！节点）{
node=map[name]=data | |{name:name，子项：[]}；
如果（名称、长度）{
node.parent=find（name.substring（0，i=name.lastIndexOf（“.”））；
node.parent.children.push（节点）；
node.key=name.substring（i+1）；
}
}
返回节点；
}
类。forEach（函数（d）{
查找（d.name，d）；
});
返回映射[“”]；
}
//返回给定节点数组的导入列表。
函数包导入（节点）{
var-map={}，
进口=[]；
//计算从名称到节点的映射。
nodes.forEach（函数（d）{
map[d.name]=d；
});
//对于每个导入，构造从源节点到目标节点的链接。
nodes.forEach（函数（d）{
if（d.imports）d.imports.forEach（函数（i）{
push（{source:map[d.name]，target:map[i]}）；
});
});
退货进口；
}
colorNode function colorNode(name){
//iterate through all the dom and get the DOM which has the data
var node = d3.selectAll(".node")[0].filter(function(d){
return d3.select(d).data()[0].name == name;
});
//for the matching node DOM set the fill to be red
d3.selectAll(node).style("fill", "red");
}
function colorLink(src,tgt){
//iterate through all the links for src and target.
var link = d3.selectAll(".link")[0].filter(function(d){
return (d3.select(d).data()[0][0].name == src && d3.select(d).data()[0][2].name == tgt);
});
//for the filtered link make the stroke red.
d3.selectAll(link).style("stroke", "red");
}
.on("mouseover", function(d){
//first make all the nodes/links black(reset).
d3.selectAll(".node").style("fill", "black");
d3.selectAll(".link").style("stroke", "steelblue");
//color the node which is hovered.
colorNode(d.name);
//iterate over the imports which is the targets of the node(on which it is hovered) and color them.
d.imports.forEach(function(name){
colorNode(name);
//color the link for a given source and target name.
colorLink(d.name, name);
});
})
工作代码。@Cyril…谢谢…但我想做的是给所有连接到它的链接上色…即。对于传入链接和传出链接…对于传出链接…我们检查源节点导入中的所有节点…但是我们将如何获得传入链接？我尝试了d3.selectAll（'.link'）.forEach（函数（a）{if（a.target==d then）}…但是a返回的是路径数组而不是链接