更新 d3.js 组中的数据

Question

我创建了一个包含数据值的组：

var group = svg.append("g");
group.data([{color : "green", opacity: 0.3 }]);

如果我想更新这些值，是否需要设置新的数据数组？

group.data([{color : "blue", opacity: 0.3 }]);

或者我能否以某种方式迭代和更新组内的值，例如：

group.data.foreach(d, function() { return d.color = "blue"; })

或

group.data.foreach(d, function() { return d.opacity += 0.5; })

我的用例是我有一个包含矩形和圆形的组。而且群里面有数据。

var group = svg.append("g");
group.data([{color : "green", opacity: 0.3 }]);

var line = group.append("rect");
line.attr("x", self.xWorldToGraph(xx) - self.lineWidth / 2)
  .attr("y", self.yWorldToGraph(yy))
  .attr("width", self.lineWidth)
  .attr("height", height)
  .style("stroke", function(d) { return d.color; })
  .style('stroke-opacity', function(d) { return d.opacity; })

group.append("circle")
  .attr("cx", self.xWorldToGraph(xx))
  .attr("cy", self.yWorldToGraph(yy))
  .attr("r", 50)
  .style("stroke", function(d) { return d.color; })
  .style('stroke-opacity', function(d) { return d.opacity; })

现在我想更新组颜色，所以圆形和矩形也改变颜色。

Answer 1

d3 不会 "auto" 切换数据后重绘。您必须 "tell" 通过再次调用 .style 函数来更改数据（在输入、更新、退出模式中，这是一个更新）。

这是一个使用您的代码的示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);

    var group = svg.append("g");
    
    group.data([{
      color: "green",
      opacity: 0.3
    }]);

    group.append("circle")
      .attr("cx", 100)
      .attr("cy", 100)
      .attr("r", 50)
      .style("stroke-width", 30)
      .style("stroke", function(d) {
        return d.color;
      })
      .style('stroke-opacity', function(d) {
        return d.opacity;
      });
      
    var colors = d3.scale.category20();
    var i = 0;

    function changeColor() {
      group.data().forEach(function(d) {
        d.color = colors(i);
      });
      group.selectAll('circle').style("stroke", function(d) {
        return d.color;
      })
      i++;
    }

    setInterval( changeColor, 1000 );

  </script>
</body>

</html>

更新 d3.js 组中的数据

Update data in d3.js group

javascript

d3.js

ecmascript-6

data-driven