D3：簡單的互動 - 點擊圈子

Question

我正在學習D3。我知道簡單的事情就像製作散點圖一樣。我的下一步是嘗試一些簡單的互動動作。例如，在我添加了一個svg後，創建了軸和網格，現在我想通過單擊svg畫布中的一個點來創建一個圓。我想我將不得不記錄點擊點的座標，然後在它的cx nad cy上附加一個圓圈，但是怎麼樣？如何記錄座標？

我很感謝你給我看一個教程，給出一個提示或最好的例子。

Answer 1

如果您熟悉JQuery，那麼D3應該有一個友好的感覺，因爲它共享一個類似的API。特別是關於用於將事件偵聽器附加到DOM選擇的.on(action, fn)語法。

如果你看看jsFiddle我已經創建了它，它實現了你之後的一個非常基本的實現，然後你可以在21行JS中看到這個運動。

(function() { 
    var svg = d3.select('svg'); 

    function getRandom(min, max) { 
     return Math.floor(Math.random() * (max - min) + min); 
    } 

    function drawCircle(x, y, size) { 
     console.log('Drawing circle at', x, y, size); 
     svg.append("circle") 
      .attr('class', 'click-circle') 
      .attr("cx", x) 
      .attr("cy", y) 
      .attr("r", size); 
    } 

    svg.on('click', function() { 
     var coords = d3.mouse(this); 
     console.log(coords); 
     drawCircle(coords[0], coords[1], getRandom(5,50)); 
    }); 
})(); 

這段代碼的最重要的方面是對線18-20（.on(...)和d3.mouse(this)）。 on('click',..)事件附加到svg元素。當發生點擊時d3.mouse以當前作用域爲參數被調用。然後它返回一個包含鼠標事件的x和y座標的數組。然後將該信息傳遞給drawCircle以及隨機半徑以在當前SVG畫布上繪製一個圓。

我建議你帶着jsFiddle和玩玩！