Question

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

$( 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);
    }
});

但是我无法将“点击”事件添加到这些条形图中，这样当我点击它们时我就可以知道我点击了哪个图表。上面的代码是我尝试将“点击”事件添加到我绘制的图表中失败的结果....正确的方法是什么？

Answer 1

如果你想让D3传递附加的对象和数据，你可以使用.on（“点击”，钻取）。

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

如果您想在不使用D3包装的情况下遵循标准HTML，也可以使用.attr（“onclick”，“drill（）”）语法。

使图表可点击

1 个答案: