Question

这是我所拥有的所有代码，"on click"部分出了问题，我无法弄清楚。它出错并说“钻头未定义” 是不是我们可以在D3部分中绘制的其中一个条形图的点击事件上调用方法？

$( document ).ready(function() {

    gon.data.pop(); // get rid of query_time element.
    var dataset = gon.data;

    function drill(d, i) {
        console.log(d.total_count); //data object
        var url = "http://localhost:4567/drill/" + d.brand_name + "/" + d.generic_name;
        window.location.href = url;
    }

    d3.select("body").selectAll("div")
        .data(dataset)
        .enter()
        .append("div")
        .attr("class", "bar")
        .attr("onclick", "drill()")
        .style("height", function(d) {
            return d.brand_name + "px";
        });
});

Answer 1

要为选择添加事件侦听器，您应该使用selection的on方法。

你可以写

d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .on("click", drill)
    .style("height", function(d) {
        return d.brand_name + "px";
    });

Answer 2

将drill函数的声明移到文档就绪处理程序之外。

更好的是，使用d3提供的on方法，而不是onclick属性。

Answer 3

如果需要，你也可以使用jQuery .click（），这是一个例子

$("#test").click(function(){
     sayHello();   
});

这里的jsfiddle： http://jsfiddle.net/SGRmX/1/

将OnClick事件添加到条形图

3 个答案: