Javascript Protovis Treemap-将标签悬停在
我已经创建了一个树形图。现在我想让悬停装置正常工作。我希望每个treemap.leaf的文本仅在用户将鼠标悬停在该特定叶上时显示 我试着效仿这个例子,但没有任何效果 我目前掌握的守则如下:Javascript Protovis Treemap-将标签悬停在,javascript,treemap,protovis,Javascript,Treemap,Protovis,我已经创建了一个树形图。现在我想让悬停装置正常工作。我希望每个treemap.leaf的文本仅在用户将鼠标悬停在该特定叶上时显示 我试着效仿这个例子,但没有任何效果 我目前掌握的守则如下: var json = { "sectors":{ "electronics": { "Sony": 85, "AMD": 70, "Techtronics": 20, "Apple": 220, "Microsoft": 340}, "automotive": {"C
var json = {
"sectors":{
"electronics": { "Sony": 85, "AMD": 70, "Techtronics": 20, "Apple": 220, "Microsoft": 340},
"automotive": {"Chevy": 43, "Audi":120, "BMW": 200}},
"ids":{"Sony":72833,"AMD":582926,"Techtronics":839261, "Apple":822463, "Microsoft":242512, "Chevy":627363, "Audi":524362,"BMW":25143}
};
var tree = json.sectors;
var ids = json.ids;
var nodes = pv.dom(tree).root("tree").nodes();
color = pv.Colors.category10().by(function(d){return d.parentNode.nodeName});
var vis = new pv.Panel()
.width(400)
.height(400)
.canvas("test");
var treemap = vis.add(pv.Layout.Treemap)
.nodes(nodes)
.round(true);
treemap.leaf.add(pv.Panel)
.def("active", false)
.fillStyle(function(d) d.active ? "lightcoral" : color(d))
.strokeStyle("#fff")
.lineWidth(1)
.antialias(false)
.cursor("pointer")
.event("mouseover", function(d) { return this.active(true)});
treemap.label.add(pv.Label)
.visible(function() {return this.parent.children[0].active()})
.textStyle(function(d) {return pv.rgb(0, 0, 0, 1)});
vis.render();
这里有几个问题:
- 当您使用
方法,并且传入的函数返回.event()
的实例时,Protovis将重新呈现标记及其子项。(关于返回要重新呈现的标记的要求,文档非常不透明。)pv.Mark
- 在树状图布局中,标签不是节点的子节点——它们是布局的一组单独的子节点。因此,在更新节点时,将不会获得要重新渲染的相应标签
- 您的行中有一个输入错误:
.fillStyle(function(d) d.active ? "lightcoral" : color(d))
是数据,而不是实例。应该是:d
但如上所述,这仍然不会更新标签(虽然我没有过多地使用它,但只要更正这一行,似乎就会突出显示所有节点,而不仅仅是您结束的节点).fillStyle(function() this.active() ? "lightcoral" : color(d))
treemap
上而不是在节点上设置active
def。您可以设置活动节点的索引,然后使用相同的索引引用标签,而不是仅使用true/false:
var treemap = vis.add(pv.Layout.Treemap)
.nodes(nodes)
.round(true)
// define the active node on the layout
.def("active", -1);
treemap.leaf.add(pv.Panel)
.fillStyle(function(d) {
return treemap.active() == this.index ? "lightcoral" : color(d)
})
// ...
.event("mouseover", function() {
return treemap.active(this.index);
})
.event("mouseout", function() {
return treemap.active(-1);
});
treemap.label.add(pv.Label)
.visible(function() {
return treemap.active() == this.index;
});
这里的缺点是每次都要渲染整个树映射。我认为可能有一种方法可以只重新渲染特定的节点和标签,但它会更复杂,所以如果性能似乎不是问题,我就不麻烦了