Question

我使用以下代码作为我的选择功能

quadrants = ["a", "b", "c", "d"];
for (var i in quadrants) 
{
    svgContainer.append("g").attr("class", quadrants[i]);
    var group = d3.select(function () {return "." + quadrants[i]});

    group.append("polygon");
    .....
}

这不起作用，因为group的值是＆＃39; function（）{return＆＃34;。＆＃34; +象限[i]＆＃39;。如何解决这个问题，以便小组选择＆＃34; .a＆＃34;，＆＃34; .b＆＃34;等等？

Answer 1

您忘了关闭{

此外，您不需要使用函数，以下代码有效：

quadrants = ["a", "b", "c", "d"];
for (var i in quadrants) 
{
    //svgContainer.append("g").attr("class", quadrants[i]);
    var group = d3.selectAll('.'+quadrants[i]);
    group.text(function(){return i});
}

实际上使用函数没有意义。该函数的作用是从变量动态计算选择器。但是，使用d3.select或d3.selectAll时，没有任何内容会传递给函数。

JsFiddle：http://jsfiddle.net/hTnJq/1/

Answer 2

在d3.select或d3.selectAll语句中使用函数没有意义，因为您还没有任何元素可用作函数的d和i值。如果select语句是nested selection like selection.selectAll( function )，则只能使用该函数，在这种情况下，父元素的数据和索引值将在函数中使用。

然而，通过使用d3 data joins，还有一种更优雅的方式来做你想要做的事情：

quadrants = ["a", "b", "c", "d"];

var group = svgContainer.selectAll("g") //define a selection of <g> elements
               .data( quadrants ); //declare that you want one <g> 
                                   //for each value in quadrants

group.enter() //get the placeholder selection for the data objects
              //that don't have matching elements yet
     .append('g') //create the elements for each placeholder
     .attr("class", function(d,i) {
               //make the class a function of the data 
               //(which is the value from the quadrants array)
              return d;
          });

group.append("polygon");  //add a polygon to *each* <g> element

如何在d3中动态选择类？

2 个答案: