d3 selectAll Confusion

Question

I am confused about the selection methods in D3. according to the description on Github using the D3.selectAll(selector) method selects all elements that match the specified selector. The elements will be selected in document traversal order (top-to-bottom). If no elements in the current document match the specified selector, returns the empty selection.

So then given the data:

XValue     Yvalue     type A     type B    X2Value    Y2Value
1          2          A          A1        1          1
1          2          A          A2        1          1

on a click event how would I reference all data points with type A = "A" right now I use `d3.select(this) which will require in this instance 2 clicks on the same point in order to operate on the two data points. Instead I would like to be able to reference all with an type A = "A" attribute so that I can switch between X2 Y2 values and X1 Y1 values.

My confusion then is how to write in a d3.selectAll(this)

EDIT

It would seem that the way to go about this would be to use the method d3.nest() so that that data is properly linked. But then I still need to dynamically allocate this to the proper key

d3.csv('AcreageData.csv', function (data) {

var nestedCsv = d3.nest()
        .key(function (d) { return d.type A; })
        .entries(data);

 var circles = svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')

    .attr('cx',function (d,i) { 
        return xScale(nestedCsv[i].values.X2Value) })   
    .attr('cy',function (d,i) { 
        return yScale(nestedCsv[i].values.Y2Value) })   
    .attr('r',function (d,i) { 
        return Math.abs(rScale(nestedCsv[i].values.Radii))})    
    .attr('fill',function (d,i) { 
        return cScale(nestedCsv[i].values.TypeA); })
    .attr("stroke",function (d,i) { 
        return cScale(nestedCsv[i].values.TypeA); })    
    .attr('stroke-width',4)

    .on('click', function (d) {
    d3.select(this)
    .transition()
    .attr('r', 50)
    .duration(500)
    .attr('cx',function (d,i) { 
            return xScale(nestedCsv[i].values.XValue) })
    .attr('cy',function (d,i) { 
            return yScale(nestedCsv[i].values.Yvalue) })
    .attr('r',function (d,i) { 
            return Math.abs(rScale(nestedCsv[i].radii))})
    .attr('fill', "none")
    .attr("stroke",function (d,i) { 
            return cScale(nestedCsv[i].TypeA); })
    .attr('stroke-width',4)
     })

This conclusion I came to reading http://www.jeromecukier.net/blog/2012/05/28/manipulating-data-like-a-boss-with-d3/ In his example he can directly select by name what he wishes to animate but because I wish to do mouseclicks I need this to reference the point selected and all of its related points. definitely this is the right approach but im stumbling on syntax

Are you looking for something like [this](https://stackoverflow.com/questions/18056716/d3-js-alternative-to-selecting-elements-by-data-attributes)? — Lars Kotthoff, Jan 11 '16 at 17:27
Yes! I think this should get me going down the right path information wise, — Tyler Cowan, Jan 11 '16 at 17:34

score 1 · Answer 1 · answered Jan 11 '16 at 16:23

You'd probably need to provide a DOM example for us to fully understand what you are doing, but typically you'd be using select or selectAll on DOM elements.

So for example you'd use the following to select a whole load of circles and change the colour on all of them at once:

d3.selectAll("circle").style("color", "red");

A good article on the subject to fully explore is Mike Bostock's 3 Little Circles.

For your particular question you simply want to start accessing your data (you wouldn't use d3.select for this). Pretend your data is an array and simply filter it:

var typeAs = data.filter(function(f) { return f.[type A] === 'A'; });

this is not quite the vein I was trying to hit. I have revised my question to further narrow the scope — Tyler Cowan, Jan 11 '16 at 17:11

d3 selectAll Confusion

EDIT

1 Answers1