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

Question

我正在学习D3.我知道简单的事情,比如散点图和所有.我的下一步是尝试一些简单的互动动作.例如,在我添加了一个svg后,生成了轴和网格,现在我希望通过单击svg画布中的一个点来创建一个圆.我想我必须记录点击点的坐标,然后用它的cx nad cy附加一个圆圈,但是怎么样？如何记录坐标？

我感谢你向我展示一个教程,给出一个提示或最好的例子.

Answer 1

如果您熟悉JQuery,那么D3应该对它有一种友好的感觉,因为它共享一个类似的API.特别是关于.on(action, fn)将事件侦听器附加到DOM选择的语法.

如果你查看我创建的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 玩一玩!