0

I am a newbie and trying to play around with my data. I first visualize these circles as following: 

  circle = svg.selectAll('circle')
        .data(dataFile)
        .enter()
        .append("circle")
        .attr("stroke", "black")
        .attr("id", function(d,i){return "id_" + i.toString();})
        .attr("class", function(d){return "Color_" + d.Cyl;})
        .attr("fill", function(d) {return color(d.Cyl);})
        .attr("cx", function(d) { return Scale.xScale(d.Weight); })
        .attr("cy", function(d) { return Scale.yScale(d.DealerCost); })
        .attr("r", r)
        .call(drag);

I then use nest() function to group my data. 

    var data = d3.nest()
                  .key(function(d) { return d.Cyl;})
                  .rollup(function(d) { 
                  return d3.sum(d, function(g) {return Number(g.value); });
    }).entries(csv);

Finally I try to translate circles based on some logics and this works perfectly.

 for(j=0; j<data.length;j++)
    {
            svg        
                .selectAll(".Color_" + data[j].key)
                .transition()
                .delay(function(d,i) { return 100; })
                .duration(1000)
                .ease("linear")
                .attr("cx", function(d,i) { return Scale.xScale(data[j].key})    
                .attr("cy", function(d,i) { return height - (i/val);})
    }

However, some experts told me if I use For loop with d3.selection there is a high possibility that I am doing something wrong. So I tried to convert the last part of my code to something like the code below but it does not work. Any idea?

 svg
        .selectAll(function(d){return ".Color_" + d.key;})  
        .transition()
        .delay(function(d,i) { return 100; })
        .duration(1000)
        .ease("linear")
        .attr("cx", function(d,i) { return Scale.xScale(d.key})      
        .attr("cy", function(d,i) { return height - (i/val);})
    }
Bahador Saket
  • 995
  • 1
  • 12
  • 24

1 Answers1

0

In your first block of code you are assigning the reference to the circles you appended to the variable circle. To add the transition to this selection you should be able to use the following code:

circle
    .transition()
    .delay(function(d,i) { return 100; })
    .duration(1000)
    .ease("linear")
    .attr("cx", function(d,i) { return Scale.xScale(d.key); } )      
    .attr("cy", function(d,i) { return height - (i/val); } );

There is no need to do a second selection when using it this way.

altocumulus
  • 21,179
  • 13
  • 61
  • 84
  • Thanks for the response but this will translate all the circles together. I tried to group my circles and I want to select the circles that fall in each group and then translate them. Does that make sense? – Bahador Saket Aug 04 '15 at 12:34
  • Well, reading your question, the grouping of circles is not really apparent. You need to provide some more information on how you want to group and what your data looks like. Maybe, you could try to set up a JSFiddle to play around with. – altocumulus Aug 04 '15 at 12:40