javascript - 将 OnClick 事件添加到条形图

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

要将事件侦听器添加到选择中，您应该使用选择的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函数声明移到您的文档就绪处理程序之外。

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

Answer 3

如果需要，您也可以使用 jQuery .click()，这是一个示例

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

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