javascript - 使图表可点击

我只是在学习并尝试同时对其进行编码，这就是我的代码。如果我取出drill方法并取出.click（drill），那么到目前为止一切正常，它绘制了一些愚蠢的条形图我发送给它的数据中的图表

$( document ).ready(function() {


    var dataset = gon.data;

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

    function drill (event) {
        var target = event.currentTarget;
        var data = $(target).data();
        console.log(data);
    }
});

但是我无法将“ click”事件添加到这些条形图中，因此当我单击它们时，我可以知道我单击了哪个图表。上面的代码是我未能将“ click”事件添加到绘制的图表中的结果。...正确的方法是什么？

最佳答案

如果希望D3传递对象和附加的数据，则可以使用.on（“ click”，drill）。

 function drill(d, i) {
      console.log(d); //data object
      console.log(i); //array position
      console.log(this); //DOM element
 }

如果要遵循没有D3包装程序的标准HTML，也可以使用.attr（“ onclick”，“ drill（）”）语法。