Question

enter上有4个半径为70像素的圆圈。

function draw_circles(...){ 


    data = get_random_generador_data(); 
    //the data contains the circle coordinates, as well 
    // as the radius, the text or the fill color.

    var circleGroup = svgContainer.selectAll('g').data(data);

   //=======
   //ENTER
   //=======
   var circleGroupEnter = circleGroup
       .enter()
       .append('g')
       .attr("id",  function(d) { return "group_"+d["ix"]; })

   circleGroupEnter
      .append("circle")
      .attr("cx", function(d) { return d["cx"]; })
      .attr("cy", function(d) { return d["cy"]; })
      .attr("r",  function(d) { return d["rad"]; })
      .attr("id",  function(d) { return "circle_"+d["ix"]; }) //this is 70
      .style("fill", function(d) { return d["fill_color"]; })
;


   //=======
   //UPDATE
   //=======
   circleGroup.select("circle")
        .attr("cx",    function(d) { return d["cx"]; })
        .attr("cy",    function(d) { return d["cy"]; })
        .attr("r",     function(d) { return 2.0* d["rad"]; })
        .attr("id",    function(d) { return "circle_"+d["ix"]; })
        .style("fill", function(d) { return d["fill_color"]; })

输入后

现在，如果用户在其中一个特定的一个中执行单击，我将该半径的半径更改为1.5 * 70并再次调用draw_circles。这会生成一组新数据，因此将调用update部分。

d3.select('#'+c_id)
                    .transition()
                    .duration(duration_till_next)
                    .attr("r",     function(d) { return 1.50* d["rad"]; })

在此之后我得到：

点击后

这可以按预期工作。现在，我有一个setTimeout，几秒后，draw_circles会从内部再次调用，获取新数据并触发上面d3代码的update部分。

代码的update部分上的

但是！，我将半径更改为140px，正如您在.attr("r", function(d) { return 2.0* d["rad"]; })

上方的行中所看到的那样

setTimeout(function(){ draw_circles(...);}, 2000);

更新后：

正如您所看到的，有一个元素未应用半径更新。但是，圆圈的所有其他属性都已更改，例如图像中的坐标，其中的文本或填充颜色。只观察到半径变化。

现在我碰巧修改ad hoc的属性与没有更新的属性完全不同，但我无法理解为什么。

有什么想法吗？

编辑：好的，问题出在这里：

d3.select('#'+c_id)
                    .transition()
                    .duration(duration_till_next)
                    .attr("r",     function(d) { return 1.50* d["rad"]; })

 setTimeout(function(){ draw_circles(...);}, 2000);

问题在于duration_till_next也是2000.所以似乎正在发生的事情是，当圆圈更新时，圆圈还没有完成转换。我原本以为首先完成改变圆半径，因为它应该首先被调用。

这会使问题消失：

.duration(0.9 * duration_till_next)

但这并不是

.duration(0.99 * duration_till_next)

所以似乎正在进行某种竞赛。

数据更改时，d3.js不会更新一个特定属性

0 个答案: