如何在d3中动态选择类？

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

这个自组的值不工作是“功能（）{回报‘’ +象限[i]'。 我该如何解决这个问题，以便该组选择“.a”，“.b”等等？

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价值的源泉使用。如果选择语句为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