d3.js - D3 : Simple Interaction - Circle with a click

Question

我正在学习D3。我知道一些简单的事情，例如绘制散点图等等。我的下一步是尝试一些简单的交互式操作。例如，在附加了svg，制作了轴和网格之后，现在我希望通过单击svg Canvas 内的一个点来制作一个圆。我想我将不得不记录单击点的坐标，然后在其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。然后，它返回一个具有mouse事件的x和y坐标的数组。然后，此信息与随机半径一起传递给 drawCircle，以在当前SVG Canvas 上绘制一个圆。

我建议您带jsFiddle和 来玩!