2

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

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

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

4

1 回答 1

1

d3切换数据后不会“自动”重绘。您必须通过再次调用 .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>

于 2015-12-09T18:50:04.170 回答