javascript - 是否可以在 data.enter() 方法中使用 data.enter() 方法？

Question

我认为标题是不言自明的。

假设我正在输入一些像这样的 div，并使用每个 div 创建一个单独的输入级联:

var rects = g.selectAll("rect").data(data);

  rects.enter()
    .append("rect")
    .attr("width","100px")
    .attr("height","100px")
    .attr("y",function(d,i){ return margin.top + (i * spacing) + "px"})
    .attr("x",margin.left + "px")
    .attr("fill", function(d) { return "d.color" }
    .each(function(d,i){
      var that = d3.select(this)
         that.selectAll('circle.timelinefeatures')
           .data(allevents)
           .enter()
             .append('circle')
              .attr('class',"timelinecircles")
            });

这是正确的做法吗？

Answer 1

我认为这个例子来自 d3 的 API 引用 selection.data(values, key)很好地说明了这一点:

The values array specifies the data for each group in the selection. Thus, if the selection has multiple groups (such as a d3.selectAll followed by a selection.selectAll), then data should be specified as a function that returns an array (assuming that you want different data for each group). The function will be passed the current group data (or undefined) and the index, with the group as the this context. For example, you may bind a two-dimensional array to an initial selection, and then bind the contained inner arrays to each subselection. The values function in this case is the identity function: it is invoked for each group of child elements, being passed the data bound to the parent element, and returns this array of data.

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var tr = d3.select("body").append("table").selectAll("tr")
    .data(matrix)
  .enter().append("tr");

var td = tr.selectAll("td")
    .data(function(d) { return d; })
  .enter().append("td")
    .text(function(d) { return d; });

另请参阅:https://github.com/mbostock/d3/wiki/Selections#selectAll

var rects = g.selectAll("rect").data(data);
rects.enter().append("rect");

var tf = rects.selectAll('circle.timelinefeatures').data(function(d, i) {
    return d;
});
tf.enter().append('circle').attr('class', 'timelinefeatures');