将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

要为选择添加事件侦听器,您应该使用selection on 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";
    });