D3.js mouse()函数

D3.js 中的d3.mouse()函数用于返回当前事件的 x 坐标和 y 坐标。如果单击事件，则返回单击的 x 和 y 位置。

句法：

d3.mouse(container);

参数：此函数接受如上所述和如下所述的单个参数：

• 容器：它是容器的名称或附加事件的 HTML 标记。

返回值：它返回坐标 x 和 y 的数组。

下面的示例说明了 JavaScript 中的 D3.js mouse()函数：

示例 1：

HTML

    
        
        
        D3.js mouse() Function
    
    
        div {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    
    
        
        
        
        
        
        
            let btn = document.querySelector("div");
            var div = d3.select("div");
            div.on("click", createDot);
            function createDot() {
                
                // Using d3.mouse() function
                let pos = d3.mouse(this);
                console.log(pos);
            }
        
    

输出：

示例 2：

HTML

    
        
        
        D3.js mouse() Function
    
    
        .div {
            width: 200px;
            height: 200px;
            background-color: green;
            overflow: hidden;
        }
        div {
            background-color: red;
            width: 10px;
            height: 10px;
        }
    
    
        click on the box
        
        
        
        
        
        
            let btn = document.querySelector("div");
            var div = d3.select("div");
            div.on("click", createDot);
            function createDot() {
                
                // Using d3.mouse() function
                let pos = d3.mouse(this);
                console.log(pos);
                d3.select("div")
                    .append("div")
                    .style("background-color", "white")
                    .style("position", "absolute")
                    .style("margin-left", `${pos[0] - 10}px`)
                    .style("margin-right", `${pos[0] - 10}px`)
                    .style("margin-top", `${pos[1] - 10}px`)
                    .style("margin-bottom", `${pos[1] - 10}px`);
            }
        
    

输出：

在点击框之前：

点击框后：