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和玩一玩！

D3：简单交互 - 点击一下圈

1 个答案: