web-dev-qa-db-ja.com

d3.jsで、nullデータのappend（）をスキップします

小さな円の弾丸から折れ線グラフを描いています。ただし、データには穴があり、配列では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)
javascriptd3.js
17
meetamit

1つのオプションは、データを異なる方法で表すことです。これにより、x座標を計算するためにインデックスに依存しなくなります。たとえば、各データをオブジェクト（たとえば、_{x: 0, y: 0.2840042}_）として表した場合、x座標を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()。これは最初の作成では機能しますが、後で要素を再選択するとインデックスが変更されるため、お勧めしません。

28
mbostock

最も簡単なオプションは、.data(…)に渡されるデータからnullをフィルタリングし、インデックスを維持するためにデータを拡張することです。

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/

2
David Wolever

このパターンを試してください。サークルを削除または非表示にすることができます。

// 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();
1
Monarch Wadia

そもそも追加したくない場合の方法は次のとおりです。 .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();
 }
});

ここにビンがあります http://jsbin.com/qojifug/edit?js,output

1
getsetbro