我正在D3 v4中使用此力图。 当用户移动鼠标时,条形图的颜色将会改变。在d3 v3中,我的代码可以很好地工作。但是当我在d3 v4中使用它时,它并不起作用。在官方介绍中,我可以这样使用:
func (b example) PrintFields() {
val := reflect.ValueOf(b)
for i := 0; i < val.Type().NumField(); i++ {
// skips fields without json tag
if tag, ok := val.Type().Field(i).Tag.Lookup("json"); ok {
fmt.Println(tag)
}
}
}
但它仍然无法奏效。 这是我的代码:
selection.on("mousedown touchstart", function() {
console.log(d3.event.type);
});
我是初学者,你能帮帮我吗?或者给我一个有用的建议也没关系。三江源!
答案 0 :(得分:3)
在d3.v4中注册mouseover和mouseout是相同的,与你正在做的一样。
但不是使用attr
:
.on("mouseover",function(d,i){
console.log("hello")
d3.select(this)
.attr("fill","yellow");//it is style not attribute
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");//it is style not attribute
});
您应该使用style
:
.on("mouseover",function(d,i){
console.log("hello")
d3.select(this)
.style("fill","yellow");//it is style
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.style("fill","steelblue");//it is style
});
工作代码here