d3.js mouse()用法及代碼示例

D3.js中的d3.mouse()函數用於返回當前事件的x坐標和y坐標。如果事件被點擊，那麽它將返回點擊的x和y位置。

用法:

d3.mouse(container);

參數：該函數接受如上所述和以下描述的單個參數：

container:它是事件附加到的容器或HTML標記的名稱。

返回值：它返回坐標x和y的數組。

以下示例說明了JavaScript中的D3.js mouse()函數：

範例1：

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta
            name="viewport"
            path1tent="width=device-width,  
                       initial-scale=1.0"/> 
        <title>D3.js mouse() Function</title> 
    </head> 
    <style> 
        div { 
            width:200px; 
            height:200px; 
            background-color:green; 
        } 
    </style> 
    <body> 
        <div></div> 
        <script src= 
"https://d3js.org/d3.v4.min.js"> 
        </script> 
        <script src= 
"https://d3js.org/d3-selection.v1.min.js"> 
        </script> 
        <script> 
            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); 
            } 
        </script> 
    </body> 
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta
            name="viewport"
            path1tent="width=device-width,  
                       initial-scale=1.0"/> 
        <title>D3.js mouse() Function</title> 
    </head> 
    <style> 
        .div { 
            width:200px; 
            height:200px; 
            background-color:green; 
            overflow:hidden; 
        } 
        div { 
            background-color:red; 
            width:10px; 
            height:10px; 
        } 
    </style> 
    <body> 
        <h2>click on the box</h2> 
        <div class="div"></div> 
        <script src= 
"https://d3js.org/d3.v4.min.js"> 
        </script> 
        <script src= 
"https://d3js.org/d3-selection.v1.min.js"> 
        </script> 
        <script> 
            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`); 
            } 
        </script> 
    </body> 
</html>

輸出：

單擊框之前：

單擊框後：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js mouse() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。