3

私がこれを行うとき：

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

.linkクラスを持つノードはありません。そのため、selectAll は空の選択を返します。しかし、これを初めて呼び出すと、次のことができることがわかりました。selectAll('whaterverYouWant')

.append('path')これは、後でタグ名とクラスを提供するため、D3 は選択内容に関係がないためです.attr(class ...)。

そして、既に存在する要素を選択したい場合.enterは、プレースホルダーの選択を返すドキュメントを読みました。しかし、プレースホルダーの選択 (.link クラスの匿名タグ?) を返す場合、パスにパスを追加する意味はありません。

.append を呼び出すと、必要な処理が実行されます。つまり、svg へのパスが追加されます。しかし、私はその背後にある論理を理解していません。（d3は強力なので、うまくいくとうれしいです）

だから、OK私は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 の部分内で変更、追加、削除する予定のすべての要素を選択することです。 .

したがって、特定の領域で「四角形」を使用している場合は、次のようにします。

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 に答える