Javascript 错误：无效的<；值；圆圈>；属性cx="；“南”；在dimple.js中

我正在制作一个图表，当点击一个按钮时，它可以用不同的数据进行更新

当x轴不改变其长度时，下面的代码似乎有效，但当x轴长度改变且图表更新时，我得到以下错误：

error:Invalid value for attribute cx=“NaN”

代码：

var svg=dimple.newSvg（“#stepContainer”，400300）；
var步骤_数据=[
{Period:1，FIP:（Math.random（）*1000000）}，
{Period:2，FIP:（Math.random（）*1000000）}，
{Period:3，FIP:（Math.random（）*1000000）}，
{Period:4，FIP:（Math.random（）*1000000）}，
];
var stepChart=新的酒窝图表（svg，step_数据）；
阶梯图.立根（50,40,305,205）；
var myAxis=stepChart.addCategoryAxis（“x”，“期间”）；
步骤图。添加测量轴（“y”、“FIP”）；
var s=stepChart.addSeries（空、凹陷、绘图、直线）；
s、 插值=“步”；
stepChart.draw（）；
d3.选择（“#btn”）。在（“单击”，函数（）{
//如果x轴的长度保持不变，我就不会得到误差
//var周期=4；
var periods=Math.random（）*50；
arr=[]；
对于（i=1；i这是一个突出的错误。它似乎不会影响显示，它只会引发一个不必要的控制台错误：


var svg = dimple.newSvg("#stepContainer", 400, 300);

        var step_data = [
             {Period: 1, FIP: (Math.random() * 1000000)},
             {Period: 2, FIP: (Math.random() * 1000000)},
             {Period: 3, FIP: (Math.random() * 1000000)},
             {Period: 4, FIP: (Math.random() * 1000000)},
             ];

        var stepChart = new dimple.chart(svg, step_data);
        stepChart.setBounds(50, 40, 305, 205);
        var myAxis = stepChart.addCategoryAxis("x", "Period");
        stepChart.addMeasureAxis("y", "FIP");
        var s = stepChart.addSeries(null, dimple.plot.line);
        s.interpolation = "step";
        stepChart.draw();

        d3.select("#btn").on("click", function() {
        // If the length of the x-axis stays the same I don't get the error
        //var periods = 4;
        var periods = Math.random()* 50;
        arr = [];
        for (i=1; i <=periods; i++) {
            arr.push({Period: i, FIP: (Math.random() * 1000000)});
        }

           stepChart.data = arr;
           stepChart.draw(1000);
        });