Question

我觉得我的主要问题是我不知道要问什么问题。我希望你解决这个例子问题的建议能指出我正确的方向来处理这样的情况。

这是一个非常简单的例子，我只是为了说明而拼凑在一起：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body style="background-color:black;">

    <div id="viz"></div>
    <script type="text/javascript">

    var svg = d3.select("body")
                .append("svg")
                .attr("width", 500)
                .attr("height", 500);

    svg.selectAll("circle")
        .data([0])
        .enter()
        .append("circle")
        .attr("cx", 250)
        .attr("cy", 250)
        .attr("r", 30)
        .attr("fill", "white");

    var m = svg.selectAll("circle.moving")
        .data([0])
        .enter()
        .append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 10)
        .attr("fill", "red");

    repeat();

    function repeat() {
        m.transition()
        .duration(1000)
        .ease("linear")
        .attr("cx", function(d) { return Math.floor(Math.random()*450);})
        .attr("cy", function(d) { return Math.floor(Math.random()*450);})
        .each("end", repeat);
    }


    </script>
</body>
</html>

demo http://andrewlaprise.com/demo/demo.gif

现在让我们说每次红色圆圈与白色圆圈碰撞时我都会想要发生一些事情。如果有很多白圈怎么办？如果存在动态数量的白圈，其位置由用户控制怎么办？

我应该使用某种活动吗？我是事件驱动编程的新手，我还没有直觉。

我怀疑这个问题的答案会为我打开很多门（至少告诉我谷歌需要什么）。我该如何最好地倾听这次碰撞？

D3 - 响应对象之间的交互

0 个答案: