解釋Mike Bostock的d3.js dragmove函數

Question

我正在嘗試在我的d3腳本中創建可拖動的行爲。我在這裏學習邁克·博斯托克的例子：http://bl.ocks.org/mbostock/1557377

這是有問題的功能：

function dragmove(d) { 
    d3.select(this) 
     .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x))) 
     .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y))); 
} 

這似乎讓人有些困惑。

• 爲什麼使用Math.max和Math.min功能？

Answer 1

它被用來限制每個圓的拖動範圍。

x被限於[radius, width-radius]

y被限制於範圍[radius, height-radius]

這些都是適當轉化的SVG g元件內部，使得x和y相對於每個小區的範圍內。因此，拖動時，圓的邊緣將穿過單元邊界。