Protovis Treemap - 在悬停时显示标签

我有一个我创建的树形图。现在我试图让悬停在正常工作。我希望每个treemap.leaf的文本仅在用户悬停在该特定页面上时才会显示。Protovis Treemap - 在悬停时显示标签

我试图以此为榜样无济于事 http://mbostock.github.com/protovis/docs/interaction.html

我到目前为止的代码如下：

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();

来源

2011-09-21 Josh O' Bryan

有几个问题在这里：

当您使用.event()方法，和您传入的函数返回一个ins Protovis将重新提供该商标及其子项。（该文档是相当不透明关于你返回你想要重新呈现标记的要求。）
内树图布局，标签不节点的孩子 - 他们的单独组布局的孩子们。所以当你更新一个节点时，你不会得到相应的标签来重新渲染。
你必须在该行一个错字：
```
.fillStyle(function(d) d.active ? "lightcoral" : color(d)) 
```
d是数据，而不是实例。它应该是：
```
.fillStyle(function() this.active() ? "lightcoral" : color(d)) 
```
但正如上文所述，这仍然不会更新标签（虽然我不玩这个太多，只是纠正这一行似乎突出显示所有节点，不只是你的结局）。

因此，要解决这一切，你要设置的active DEF上treemap，而不是节点上。而不是仅仅使用真/假的，你可以设置活动节点的索引，然后使用相同的索引来引用标签：

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; 
});

Working jsFiddle here.

这里的缺点是，你每次重新渲染整个树形图。我认为可能只有重新渲染特定节点和标签的方法，但它会更复杂，所以如果性能似乎不成问题，我不会麻烦。

来源

2011-09-26 18:59:05 nrabinowitz

Protovis Treemap - 在悬停时显示标签

回答

相关问题