小さな円の弾丸から線グラフを描いています。ただし、データには穴があり、配列ではnullで表されます。当然、データがないところはどこでも、円があってはなりません。しかし、d3のappend（）メソッドはとにかくそれらを追加します。これを回避するにはどうすればよいですか？
これが私の問題を正確に再現したjsFiddleモックアップです。
グラフのX軸上にある一連の円はすべてヌルであるため、これらの円を使用しないことに関心があります。
jsfiddleリンクからの関連コード：
svg.selectAll('circle').data(values).enter()
.append('circle')// <-- I don't want to do this for null's
.attr('fill', '#c00')
.attr('r', 3)
.attr('cx', xi)
.attr('cy', yFlipped)
1つのオプションは、データを異なる方法で表現することです。これにより、x座標を計算するためにインデックスに依存しなくなります。たとえば、各データをオブジェクト（たとえば）として表現した場合、x座標をではなく{x: 0, y: 0.2840042}として計算できます。x(d.x)x(i)
もう1つのオプションは、値がnullのときに半径をゼロに設定して、円を非表示にすることですcircle.attr("r", function(d) { return d == null ? 0 : 3; })。または、円を非表示にすることもできますcircle.style("display", function(d) { return d == null ? "none" : null; })。
null要素を追加した後で削除することもできますcircle.filter(function(d) { return d == null; }).remove()。これは最初の作成では機能しますが、後で要素を再選択するとインデックスが変更されるため、お勧めしません。
最も簡単なオプションは、渡されるデータからnullをフィルタリングし.data(…)、インデックスを維持するためにデータを拡張することです。
svg.selectAll('circle')
.data(values
.map(function(v, idx) { return v == null? null : { idx: idx, value: v })
.filter(function(v) { return v != null })
)
.enter()
.append('circle')
.attr('fill', '#c00')
.attr('r', 3)
.attr('cx', function(d) { return d.idx * 10 }) // or whatever
.attr('cy', function(d) { return d.value.y }) // or whatever
自然にリストされていない場合でも、このパターンの個々のサブ要素に従うこともできることに注意してください。たとえば、条件付きで2番目の円を追加する状況を考えてみます。
var circles = [
{ color: 'red', cx: 30, cy: 30, subCircleColor: 'blue' },
{ color: 'blue', cx: 60, cy: 60, subCircleColor: 'green' },
{ color: 'green', cx: 90, cy: 90 },
];
// Create a group which will hold the circles, since the result will
// be:
// <g class="circles">
// <circle color="{{ color }}" ... />
// <circle class="sub-circle" color="{{ subCircleColor }}" ... />
// </g>
var circlesGroups = svg.selectAll("g.circles")
.data(circles)
.enter()
.append("g").attr({"class": "circles"})
// Add the first circle to the group
circlesGroups
.append("circle").attr({
"fill": function(d) { return d.color },
"r": 20,
"cx": function(d) { return d.cx },
"cy": function(d) { return d.cy },
})
// If there is a subCircleColor, add the second circle to the group
circlesGroups.selectAll("circle.sub-circle")
.data(function(d) {
if (d.subCircleColor)
return [d];
return [];
})
.enter()
.append("circle").attr({
"class": "sub-circle",
"fill": function(d) { return d.subCircleColor; },
"r": 10,
"cx": function(d) { return d.cx },
"cy": function(d) { return d.cy },
})
フィドル： http： //jsfiddle.net/3d6e648k/
このパターンを試してください。これにより、サークルが削除または非表示になります。
// Step 1: hides all circles which are "null"
d3.selectAll(".yourItem")
.data(data)
.enter()
.append("circle")
.attr("visibility", function(d,i){
if(yourFunction(d) == null) return "hidden";
})
// Step 2: optional, deletes all circles which are "hidden"
d3.selectAll("circle[visibility=hidden]").remove();
そもそも絶対に追加したくない場合の方法は次のとおりです。.each（）内でifステートメントを使用し、次にd3.select（this）を使用して、現在のアイテムに追加しました。
var data = [9, 0, 7, 0, 5, 0, 3, 0, 1];
var svg = d3.select('#svg').append('svg').attr({'viewBox': '-10 -10 99 20'});
svg.selectAll('g').data(data).enter().append('g').each(function (d,i) {
if(d){
d3.select(this).append('circle').attr({r:5,cx:(i*9)});
}else{
d3.select(this).remove();
}
});
フィルタリングするだけです。
values.filter(function(el){return el !== null;})