D3 Handling Events

this代表的就是当前元素

    <p id = "test">click</p>
    <script>
        // var para = document.getElementById("test")
        // para.onclick = function(){this.innerHTML = "Done"}

        d3.select("#test")
            .on("click",function(){d3.select(this).text("Done")})
    </script>

拖拽

    <script>
        var circles = [
            {cx:150, cy:220, r:30},
            {cx:250, cy:200, r:30}
        ]
        var svg = d3.select("body").append("svg").attr("width",300).attr("height",300)
        
        var drag = d3.behavior.drag()
                    .origin(function(d,i){return {x:d.cx ,y:d.cy}})
                    .on("dragstart",(d)=>{console.log("拖拽开始")})
                    .on("dragend",(d)=>{console.log("拖拽结束")})
                    .on("drag",function(d){d3.select(this)
                                .attr("cx",d.cx = d3.event.x)
                                .attr("cy",d.cy = d3.event.y)}
                        )
        
        svg.selectAll("circle")
            .data(circles)
            .enter()
            .append("circle")
            .attr("cx",(d)=>d.cx)
            .attr("cy",(d)=>d.cy)
            .attr("r",(d)=>d.r)
            .attr("fill","black")
            .call(drag)


    </script>

缩放行为

    <script>
        var circles = [
            {cx:150, cy:220, r:30},
            {cx:250, cy:200, r:30}
        ]
        var svg = d3.select("body").append("svg").attr("width",300).attr("height",300)

        var zoom = d3.behavior.zoom()
                    .scaleExtent([1,10])
                    .on("zoom",function(d){
                        d3.select(this).attr("transform","translate("+d3.event.translate+")"+"scale("+d3.event.scale + ")")
                    })

        var g = svg.append("g")
                    .call(zoom);

        g.selectAll("circle")
            .data(circles)
            .enter()
            .append("circle")
            .attr("cx",(d)=>d.cx)
            .attr("cy",(d)=>d.cy)
            .attr('r',(d)=>d.r)
            .attr('fill','black')
    </script>