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

未捕获的TypeError：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。

希望它有所帮助。

使用D3

1 个答案: