CODEWITHSUNDEEP
d3.jssvg
Reggie
Reggie

Reputation: 523

Create Unique Path Within Each SVG Group Element Using D3

I'm trying to create 50 SVG groups with each group containing a path that draws a particular US state. However, I can't figure out how to access the state data from the SVG group when creating the state path for that group. Can someone put me on the right track? Thanks!

var coords = [
    { 'id':'HI', 'class':'state hi', 'd': 'm 233.08751,519.30948 1.93993, ...' },
    { 'id':'AK', 'class':'state ak', 'd': 'm 158.07671,453.67502 -0.32332, ...'}
    ...
];

// Select the SVG
var svgContainer = d3.select('svg');

// Create groups with state data
var groups = svgContainer.selectAll('g')
    .data(coords)
    .enter()
    .append('g');

// Create state path for each group
groups.each(function(g){
    g.select('path')
        .data(___NEED TO RETURN THE PATH DATA HERE___)
        .enter()
        .append('path');
});

Uncaught TypeError: g.select is not a function

Upvotes: 0

Views: 1689

Answers (1)

jarandaf
jarandaf

Reputation: 4427

Assuming your data is valid and you only want to handle new elements (no updates), this should work:

// Select the SVG
var svgContainer = d3.select('svg');

// Create groups with state data
var groups = svgContainer.selectAll('g')
    .data(coords)
    .enter()
    .append('g')
    .append('path')
    .attr('d', function (d) { return d.d; });

I have created a pretty simplified fiddle with an example.

If you still want to use the .each function, you can proceed as follows:

groups.each(function (d, i){
    // `this` (in this context) is bound to the current DOM element in the enter selection
    d3.select(this).append('path').attr('d', d.d);
});

For further details, you can check the API documentation.

Hope it helps.

Upvotes: 2

Related Questions