更新d3.js组中的数据

Update data in d3.js group

本文关键字：数据 d3 js 更新      更新时间：2023-09-26

我创建了一个具有数据值的组：

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; })

现在我想更新组的颜色，这样圆形和矩形也会改变颜色。

切换数据后，d3不会"自动"重绘。您必须通过再次调用.style函数来"告诉"它数据已经更改（在enter、update、exit模式中，这是一次更新）。

下面是一个使用代码的示例：

<!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>

相关文章：