如何在D3部队布局中突出显示/选择邻居的邻居
How do I highlight/select neighbours of neighbours in D3 force layout?
我用它来帮助突出显示相邻节点:
http://jsfiddle.net/simonraper/jz2AU/light/
var toggle = 0;//Toggle stores whether the highlighting is on
var linkedByIndex = {};//Create an array logging what is connected to what
for (i = 0; i < network.network.data.nodes.length; i++) //-populate the array
{
linkedByIndex[i + "," + i] = 1;
};
network.network.data.edges.forEach(function (d) //-checks what nodes are related in array
{
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//-------------------------check if nodes are linked
function neighboring(a, b) //This function looks up whether a pair are neighbours
{
return linkedByIndex[a.index + "," + b.index];
}
//-------------------------finds out connected nodes, keeps their styles but changes the opacity of every other
function connectedNodes() {
//Reduce the opacity of all but the neighbouring nodes
d = d3.select(this).node().__data__;
if (toggle == 0) {
// nodes.classed("highlighted", function (o) {
// return neighboring(d, o) | neighboring(o, d) ? true : false;
// });
nodes.style("opacity", function (o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
});
links.style("opacity", function (o) {
return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
});
//Reduce the op
toggle = 1;
} else {
//Put them back to opacity=1
nodes.style("opacity", 1);
links.style("opacity", 1);
nodes.classed("highlighted", false);
toggle = 0;
}
}
这样做的作用是双击节点时,所选节点及其相邻节点保持其不透明度,而所有其他节点降低其不透明度。
现在,当我双击第一个选定节点的子节点之一时,整个选择都会消失(所有节点的不透明度为 1(。
我希望拥有的是,当我双击其中一个子节点时,选择不会消失,该子节点的相关节点现在变得"突出显示"。
这样做将有助于指导我轻松完成力定向图,尤其是对于大量数据。
为此尝试了大约一个小时,这是对代码的简单更改
将两个切换开关都更改为 - 切换=0;
这样,在选择节点时,它不会清除选择,它只会突出显示邻居
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- 有时数据是't显示在浏览器中
- 如何在D3部队布局中突出显示/选择邻居的邻居
- 如何从文本区域中突出显示的文本中获取邻居字符
- 在强制布局中突出显示邻居