Question

我使用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 个答案: