CODEWITHSUNDEEP
javascriptd3.jsecmascript-6data-driven
Taufik Hidayat
Taufik Hidayat

Reputation: 23

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

or 

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.

Upvotes: 2

Views: 356

Answers (1)

Mark
Mark

Reputation: 108517

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="[email protected]" 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>

Upvotes: 1

Related Questions