突出显示枝状图中的一组节点

时间:2018-07-03 14:00:19

标签: javascript d3.js tree

我使用phylogeny.io库绘制了一个分支图(系统发生树)。 http://about.phylogeny.io/ 我要进行如下修改:我有一个下拉菜单来选择某些门。选择门廊时;然后应突出显示该分支图中该门下的所有节点。 在库中定义了selectNode(d)函数,只要在鼠标点击分支图时就会触发该函数。我想将其修改为selectNodeById(id),但是此函数将突出显示特定ID的数组。

但是,它总是给我这个错误:未捕获的TypeError:t.querySelector不是Array.ya.select(d3。)上d3.min.js:1处的pa(d3.min.js:3)的函数。 min.js:3)在selectNodeByID(moduleChart.js?bust = 1530622967593:408)在Object.phylumSelection(moduleChart.js?bust = 1530622967593:1769)在Object.menuInputAction(moduleData.js?bust = 1530622967593:1245)在HTMLSelectElement。 (moduleData.js?bust = 1530622967593:580)位于HTMLSelectElement.dispatch(jQuery-2.1.3.min.js:3)位于HTMLSelectElement.r.handle(jQuery-2.1.3.min.js:3)

function selectNode(d) {
// if (d3.event.defaultPrevented) return; // click suppressed
var alreadySelected = 
d3.select(this).select('rect.nodeShape').classed("selected");
if (alreadySelected) {
// Deselect the node

d3.select(this).select('rect.nodeShape').classed({'nodeShape': true, 
'selected': false});
chart.nodeInfoDisplay('hide');
settings.selectedNode = null;
} else {
// Add node annotation to floating div
if (d.meta) {
chart.nodeInfoSave(d.meta.annotation.info, d.meta.annotation.url);
}
// Deselect all other and select new node
svgGroup.selectAll("rect.selected").attr('class', 'nodeShape');
d3.select(this).select('rect.nodeShape')
.classed({'nodeShape': true, 'selected': true})
.style("fill", "red")
.style("stroke","red")
.style("stroke-width","10px")
.attr("width","10px")
.attr("height","10px");
chart.nodeInfoDisplay('show');
console.log(d)
console.log(d.id);
settings.selectedNode = d.id;
}
}
function selectNodeByID(id) {
// if (d3.event.defaultPrevented) return; // click suppressed
var alreadySelected = 
d3.select(this).select('rect.nodeShape').classed("selected");
if (alreadySelected) {
// Deselect the node
}else{
svgGroup.selectAll("rect.selected").attr('class','nodeShape').
filter(funct
ion (d) {
return d.data.id === id;
})
.datum();
settings.selectedNode = id;
}

0 个答案:

没有答案