Update data in d3.js group

问题

I create a group with data values:

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

If I want to update these values, do I need to set a new data array?

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

Or can I somehow iterate and update the values inside the group, like:

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

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

My use case is that I have a group with a rectangle and a circle. And the group has data in it.

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

Now I want to update the group color so the circle and rectangle also change color.

回答1:

d3 won't "auto" redraw after you switch out data. You have to "tell" it the data has changed by calling the .style functions again (in the enter, update, exit pattern, this is an update).

Here's an example using your code:

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

来源：https://stackoverflow.com/questions/34178408/update-data-in-d3-js-group

标签

javascript

d3.js

ecmascript-6

data-driven