transition in group bar

[Maitep]

Hi everyone, I am working with group bar with d3 v3

I want to update my bar every second and do a transition with the new value, but I don't know why don't change all the values and why disappear the  first bar only 

any idea about that?

this is my code here

thanks in advance

[Maitep]

[Japhy Bartlett]

Woops, I get a 404 for that fiddle?

Probably it's something with using `.enter()` when you want to update.

```

var bars = d3.select('svg .bar').data(yourdata);

// new bars

bars

    .enter()

    .append('rect')

      .attr( 'x', ...) 

// update existing bars

bars

    .attr( 'x', ... )  // position, etc

// remove bars that don't exist anymore

bars

    .exit()

    .remove()

```

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Maitep]

Here the new link 

Now I have a new issue, I only move the first column of each group

    for (var i = 0; i < mydata_bar.length; i++) {
      svg.selectAll("rect")
         .data(mydata_bar[i])
         .transition()
         .duration(900)
         .attr("height", function(d){
            return d;
         })
         .attr("y", function(d) {
            return height - d;
          });
    }

mydata_bar is array that contains array for example [[1,2,3,4],[5,10,6,45],[34,56,22,34],[2,5,10,44]]

svg.selectAll("rect")
         .data(mydata_bar[i])

this line always return the first group of element

Any idea 

[steve rickus]

I fixed a couple things and it seems to work now -- the main problem was that you needed to keep a variable pointing to the "g" element that contains all the bars, so you could set its data to the updated array of arrays of random values.

Each time you chain another .selectAll(...) call, it adds another level to the dom structure that maps to your data. Since mydata is an array of arrays, you need to match it with the two levels of svg.g -> g -> rect

--

Steve

On Wednesday, June 21, 2017 at 3:24:26 PM UTC-4, Maitep wrote:

Here the new link 

Now I have a new issue, I only move the first column of each group

Any idea