Javascript 使用计时器更新d3生成圆的位置_Javascript_Asp.net Mvc_D3.js

Javascript 使用计时器更新d3生成圆的位置

javascript asp.net-mvc d3.js

Javascript 使用计时器更新d3生成圆的位置,javascript,asp.net-mvc,d3.js,Javascript,Asp.net Mvc,D3.js,我是d3新手，对javascript基本上是新手，遇到了一个用我目前的知识无法解释的错误我已经使用2d数组生成了6个圆（成功），并创建了一个函数来调用计时器，以便在每次调用时将x和y位置增加1。目前，我的代码生成了6个圆圈，但是计时器无限地创建了更多的“NaN”圆圈，而不是更新初始6的位置。我的代码如下 <body> <div id="svgDiv"></div> <script src="~/scripts/d3/d3.min.js

我是d3新手，对javascript基本上是新手，遇到了一个用我目前的知识无法解释的错误

我已经使用2d数组生成了6个圆（成功），并创建了一个函数来调用计时器，以便在每次调用时将x和y位置增加1。目前，我的代码生成了6个圆圈，但是计时器无限地创建了更多的“NaN”圆圈，而不是更新初始6的位置。我的代码如下

<body>
    <div id="svgDiv"></div>

    <script src="~/scripts/d3/d3.min.js"></script>
    <script src="~/scripts/App/test.js"></script>

</body>

最终目标是让圆圈随机浮动，但在这一点上，我只是试图控制位置。编辑：错误发生在动画功能中

任何见解都将是伟大的，提前感谢

您在这里遇到了一些问题。最主要的一点是，每秒要将相同的数据绑定到DOM元素60次，这毫无意义。第二个问题是，你不是在增加位置，而是简单地重置它们。第三个问题是数据中没有

cx

或

cy

属性。最后一个问题是，您没有声明您的圈子的选择

我做了一个简单的演示来演示如何使用

d3.timer

。检查如何检索和更改位置。另外，请记住，在本例中，我删除了所有转换：混合转换和计时器是复杂的，而且通常是不必要的

以下是演示：

var windowWidth=500；
var windowLength=300；
var pos=[
[50, 40],
[100, 80],
[150, 120],
[200, 160],
[250, 200],
[300, 240]
];
var base=d3.选择（“主体”）.追加（“svg”）
.attr（“宽度”，窗口宽度）
.attr（“高度”，窗口长度）；
var circles=base.selectAll（“查尔斯达尔文”）
.数据（pos）
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d，i）{
返回位置[i][0]；
})
.attr（“cy”，函数（d，i）{
返回位置[i][1]；
})
.attr（“r”，20）
.样式（“填充”、“00ACCD”）；
变量计时器=d3.计时器（动画）；
函数animate（）{
circles.attr（“cx”，function（）{
如果（+d3.选择（此）.attr（“cx”）>500）{
计时器停止（）
}
return+d3.选择（this）.attr（“cx”）+1
});
};
console.log（d.cx）

在分配给属性

cx

的函数中显示了什么？6x错误：属性cx：预期长度，“NaN”。行本身未定义。更新：我传入的数据是字符串“circle”，而不是圆，当我传入我的2d数组“pos”时，不会抛出任何错误，也不会记录任何日志

var windowWidth = window.innerWidth;
var windowLength = window.innerHeight;

var pos =
    [[50, 40],
    [100, 80],
    [150, 120],
    [200, 160],
    [250, 200],
    [300, 240]];

var base = d3.select("#svgDiv").append("svg")
  .attr("width", windowWidth)
  .attr("height", windowLength);

function initSetup() {

    windowWidth = window.innerWidth;;
    windowLength = window.innerHeight;

    base.attr("width", windowWidth)
        .attr("height", windowLength);

    document.body.style.overflow = 'hidden';
}
window.onload = initSetup;

function windowResize() {

    windowWidth = window.innerWidth;;
    windowLength = window.innerHeight;
    base.attr("width", windowWidth)
       .attr("height", windowLength);

};
window.addEventListener("resize", windowResize);

function svgDivClick() {

    base.selectAll("circle")
        .data(pos) // .data(pos, function (d) { return d; })
        .enter()
        .append("circle")
        .attr("cx", function (d, i) {
            return pos[i][0];
        })
        .attr("cy", function (d, i) {
            return pos[i][1];
        })
        .attr("r", 0)
        .style("fill", "00ACCD")
        .transition()
        .attr("r", 20)
        .style("fill", "00ACCD")
        .duration(500);

    base.exit().transition()
        .attr("r", 0)
        .remove();

    console.log("click works");
    d3.timer(animate);
};
document.getElementById("svgDiv").addEventListener("click", svgDivClick);

function animate() {

    base.selectAll("circle")
        .data("circle", function (d) { return d; })
        .enter()
        .append("circle")
        .attr("cx", function (d, i) {
            return d.cx + 1;
        })
        .attr("cy", function (d, i) {
            return d.cy + 1;
    });

    base.exit().transition()
        .attr("r", 0)
        .remove();
};