使用 D3 在每个 SVG 组元素中创建唯一路径

Question

我正在尝试创建 50 个 SVG 组，每个组都包含绘制特定美国州的路径。但是，在为该组创建状态路径时，我无法弄清楚如何从 SVG 组访问状态数据。有人可以让我走上正轨吗？谢谢！

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

未捕获的类型错误：g.select 不是函数

Answer 1

假设您的数据有效并且您只想处理新元素（不更新），这应该可以：

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

我用一个例子创建了一个非常简化的fiddle。

如果你还想使用.each功能，可以如下操作：

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

更多详情，您可以查看API documentation。

希望对你有帮助。