0

SVG で円の 3 つのグループを作成しようとしています。私はそれらを呼び出し、それらcircleA circleBをcircleC異なる色にするつもりです。

var circleA = [
    [50,48],[106,35],[107,42],[119,52],[139,58],
    [26,60],[65,68],[117,73],[123,70],[145,78]
];

var circleB = [
    [38,81],[48,69],[48,81],
    [111,99],[128,92],[153,92]
];

var circleC = [
    [24,106],[46,99],[43,112],[63,105],
    [62,122],[92,126],[141,122],[132,145],
    [23,145]
];

//... omitting code for scale handling ... 

var svg = d3.select("body")
        .append("svg")
        .attr("width", svgw)
        .attr("height", svgh);


    svg.selectAll("circle")
   .data(circleA)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return xScale(d[0]); })
   .attr("cy", function(d) { return yScale(d[1]); })
   .attr("r", 10);

   svg.selectAll("circle")
   .data(circleB)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return xScale(d[0]); })
   .attr("cy", function(d) { return yScale(d[1]); })
   .attr("r", 10);

   svg.selectAll("circle")
   .data(circleC)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return xScale(d[0]); })
   .attr("cy", function(d) { return yScale(d[1]); })
   .attr("r", 10);

ただしcircleA、SVG にのみ追加されました。グループ B と C はありません。DOM を確認したところ<circle>、10 + 6 + 9 = 25 個の円が作成されたのではなく、10 個のタグしか作成されていませんでした。

何故ですか？ありがとうございました。

4

2 に答える 2

1 
svg.selectAll("circle")
.data(circleB)

すべての既存のcircle要素を選択し、データをそれらにバインドcircleBします。circlebinding 後に既に 10 を作成してcircleAいるためcircleB、最初の 6 つの既存のcircle要素にバインドされます。新しい要素を作成する必要がないため(既存の要素は「再利用」されます)、.enter()選択は空になり、何も起こりません。

したがって、全体的な問題は、異なるデータを同じ要素にバインドしようとしているということです。データ セットごとに要素を作成する場合は、セレクターを変更する必要があります。たとえば、異なるデータ セットに属する要素に異なるクラスを与えることができます。

svg.selectAll("circle.a")
.data(circleA)
.enter()
.append('circle')
.attr('class', 'a')
//...

svg.selectAll("circle.b")
.data(circleB)
.enter()
.append('circle')
.attr('class', 'b')
//...
于 2013-07-04T09:54:57.883 に答える
1

これは、D3 がデータを要素に一致させる方法によるものです。デフォルトでは、マッチングはインデックスによって行われます。つまり、後続の.data(...).selectAll(...)呼び出しでは、既存の円を選択し、それらをインデックスによってデータと照合します。データ項目よりも多くの円があるため、.enter()選択は空です。

これに対する解決策は、 のオプションの 2 番目の引数を介して一致する関数を提供することです。.data()たとえば、 のようなもの.data(..., function(d) { return d; })です。

于 2013-07-04T09:56:09.750 に答える