如何使用' click,mouseover,mousedown'等等在d3 v4中

时间:2016-11-29 11:43:43

标签: javascript d3.js

我正在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);
});

我是初学者,你能帮帮我吗?或者给我一个有用的建议也没关系。三江源!

1 个答案:

答案 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