3

当我这样做时：

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 很强大）

所以，好吧，我 selectAll('anything') 并附加我想要的，不管我选择了什么。但如果我试试这个：

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 >> data >> enter >> append 背后的原理是什么？

谢谢

4

2 回答 2

2

selectAll > data > enter > append 背后的原理由 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 的矩形。我只是选择某个区域中的所有矩形并在需要时对其进行处理。

于 2013-07-03T17:49:52.123 回答
0

这是一个很好的问题，也是 D3 的一个有点奇怪的属性。如果您仔细查看 D3 中的任何操作，您会注意到所有内容都是通过附加到先前创建的内容来添加的。因此，拥有 svg.selectAll('whatever class of stuff you're going to add') 背后的逻辑是，您有点在为您要追加的内容创建一个占位符。就像 svg 是一堵墙，你在上山脊上挂了钩子，然后你可以把画挂在上面。如果您没有 selectAll，我刚刚尝试过，您仍会将您要制作的任何内容附加到页面，但不会附加到 svg。

data-->enter-->append 基本上是针对您传递给 data 函数的较大数据文件中的每个元素，创建一个新元素，然后将该元素附加到我的选择中，并使用这样和这样的属性（在你使用.attr）。

于 2013-07-03T16:08:35.803 回答