交互入门

事件监听

注:事件函数中的this对象是事件触发的dom对象 d3.event的是事件的event对象

 svg.selectAll("rect")
        .data(dataSet)
        .enter()
        .append("rect")
        .attr("height", 30)
        .attr("x", padding.left)
        .attr("y", function (d, i) {
            return i * 50 + padding.top;
        })
        .attr("fill", "purple")
        .attr("width", 0)
        .on("mouseover", function (d, i) {
            console.log(d3.event);
//            该方法会绑定原生dom对象调用 所以this就是dom本身
//            函数传入的两个参数分别是绑定的数据的和角标¬
            console.log(this);
            d3.select(this).transition().duration(1000).ease("out")
                .attr("fill", "gray")
        }).on("mouseleave", function (d, i) {
        d3.select(this).transition().duration(1000).ease("out")
            .attr("fill", "purple")
    })
        .transition().duration(1000).ease("bounce")
        .attr("width", function (d) {
            return d;
        });

触屏交互

  • 在触屏交互中,例如touchstart touchmove touchend 中会用到touch对象(触摸点)需要使用d3.touches(dom)来获取触摸点数组。


    交互入门_第1张图片

注:关于d3.event对象使用如下

交互入门_第2张图片
event

  • 可以使用d3函数来获取到事件相对svg顶点的坐标


    交互入门_第3张图片
    event

你可能感兴趣的:(交互入门)