Question

当我这样做时：

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('path')
        .attr('class', 'link')
        .attr('d', diagonal)

没有.link类的节点。所以selectAll返回空选择。但我发现，当你第一次打电话时，你可以selectAll('whaterverYouWant')

这是因为D3与您选择的内容无关，因为您稍后提供了代码名称和类.append('path')，.attr(class ...)。

而且，如果你想选择已经存在的元素，我会在.enter返回占位符选择的文档中读到。但是，如果它返回一个占位符选择（带有.link类的匿名标记？），则没有必要在路径上附加路径。

当我打电话给.append时，它会做我想要的，即追加到svg的路径。但我不明白这背后的逻辑。（我很高兴它有效，因为d3很强大）

所以，好吧，我选择所有（'任何'）并追加我想要的东西，无论我选择什么。但如果我试试这个：

d3.select('#savestring-debug')
    .selectAll('div')
    .data(debugobjs)
    .enter().append('span')
    .attr('style', function(d) { return 'background:#'+d.color })
    .text(function(d) { return d.aff });

这将为div创建占位符，但我追加跨度。实际上创建了跨度，但我仍在寻找我的div;）

那么，selectAll＆gt;＆gt;背后的原理是什么？数据＆gt;＆gt;输入＆gt;＆gt;追加？

感谢

Answer 1

selectAll＆gt;背后的原理数据＆gt;输入＆gt;附加说明很好 Mike Bostock在这里：http://bost.ocks.org/mike/join/他解释了数据连接的概念。我无法使用selectAll以正确的方式使用任何权限，但我使用它的方式是选择我将要修改的所有元素 - 在我需要修改的SVG部分中删除 - 删除

所以，如果我在某个地区使用“rects”，我会做这样的事情：

var svg = d3.select('#graphID')
     .append("svg")
     .attr("width", 300)
     .attr("height", 500);

var graphGroup = self.svg.append("g");

//...Inside a render function

//just want all the "rect" elements in graphGroup
var rects = graphGroup.selectAll("rect")
                      .data(dataset);

//depending on dataset new rects will need to be appendend
rects.enter()
     .append("rect")
     .attr("x", 0)
     .attr("y", 0)
     .attr("width", 0)
     .attr("height", 0)

//all rects are transitioned to new co-ordinates
rects.transition().duration(500)
                  .attr("x", function(d, i) {
                           return xScale(i); 
                   })
                  .attr("y", function(d) {
                           return h - yScale(d);
                   })
                  .attr("width", xScale.rangeBand())
                  .attr("height", function(d){
                       return yScale(d);
                   })

//rects that have no data associated with them are removed
rects.exit()
     .transition()
     .duration(500)
     .attr("x", -xScale.rangeBand())
     .remove();

认为我可以在SVG中拥有不属于graphGroup的其他rects。我只需选择某个区域的所有区域，并在需要时进行处理。

Answer 2

这是一个很好的问题，也是D3的一个奇怪的属性。如果仔细观察D3中的任何操作，您会注意到所有内容都是通过附加到之前创建的内容来添加的。因此，拥有svg.selectAll（'你要添加的任何类别的东西'）背后的逻辑是，你有点想要一个占位符，无论你想要追求什么。这就像svg是一堵墙，你在上脊上悬挂挂钩，然后挂上你的画。如果你没有selectAll，我只是尝试了这个，你仍然会附加你要对页面做的任何内容，但它不会附加到svg。

数据 - ＆gt;输入 - ＆gt;追加基本上是对于要传递给数据函数的较大数据文件中的每个元素，创建一个新元素，并将此元素附加到我的选择中这些属性（使用.attr时设置）。

当D3.js上还没有现有节点时，调用selectAll的重点是什么

2 个答案: