D3.js clientPoint()函数

d3.clientPoint()用于返回附加到特定容器或 HTML 标记的特定事件的 x 坐标和 y 坐标。

句法：

d3.clientPoint(container, event);

参数：此函数接受两个参数，如上所述和如下所述。

• 容器：容器可以是 HTML 或 SVG 容器。
• event：事件可以是触摸、点击、悬停等任意事件。

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

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

示例 1：

HTML

    
        
        
        D3.js clientPoint() Function
    
    
        div {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    
    
        
        
        
        
        
        
            let btn = document.querySelector("div");
            btn.addEventListener("click", createDot);
            var div = d3.select("div").node();
            function createDot(event) {
                let pos = d3.clientPoint(div, event);
                console.log(pos);
            }
        
    

输出：单击绿色框后，输出将出现在控制台窗口中。

示例 2：在发生单击事件的地方创建白点。

HTML

    
        
        
        D3.js clientPoint() Function
    
    
        svg {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    
    
        
        
        
        
        
        
            let btn = document.querySelector("svg");
            btn.addEventListener("click", createDot);
            var svg = d3.select("svg").node();
            function createDot(event) {
                let pos = d3.clientPoint(svg, event);
                console.log(pos);
                d3.select(svg).append("circle").attr("fill", "white")
                  .attr("r", 5).attr("cx", pos[0]).attr("cy", pos[1]);
            }
        
    

输出：

单击 SVG 容器之前：

单击 SVG 容器后：