D3：複数の線がある折れ線グラフのnull値をスキップします

debugcn 投稿 Dev

エンドユーザー

複数の線で折れ線グラフを表示する動的配列があります。例：

var data = 
[[{x:2005, y:100}, {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:100}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]]

スクリプトのこの部分は線を引きます：

graph.selectAll("path.line")
.data(data)
.enter().append("path")
.attr("class", "line")
.style("stroke", function(d, i) { return d3.rgb(z(i)); })
.style("stroke-width", 2)
.attr("d", d3.svg.line()
.y(function(d) { return y(d.y); })
.x(function(d,i) { return x(i); }));

（私が使用しているスクリプトはhttp://cgit.drupalcode.org/d3/tree/libraries/d3.linegraph/linegraph.jsに基づいています）

私の問題：データ配列は動的であり、その中に何が含まれているかは事前にわかりません。2005年のy値がnullになる場合があります。

var data = 
[[{x:2005, y:100},  {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:null}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]]

2行目に最初のオブジェクトを無視させ、2007年から開始するにはどうすればよいですか？

回答1に基づいて、これは私が今持っているものであり、まだ全体の行を示しています：

data = 
[[{x:2005, y:100},  {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:null}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]];

var validatedInput = function(inptArray) { 
 return inptArray.filter(function(obj) {
  return obj.y != null;
 });
};

graph.selectAll("path.line")
    .data(data, validatedInput)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke", function(d, i) { return d3.rgb(z(i)); })
    .style("stroke-width", 2)
    .attr("d", d3.svg.line()
    .y(function(d) { return y(d.y); })
    .x(function(d,i) { return x(i); }));

エンドユーザー

結局、私はここの解決策に基づいて、これを自分で解決しました。秘訣は、空の値をできるだけ遅く削除して、キャンバス上のすべての値（ポイント）の位置が保持されるようにすることです。

graph.selectAll("path.line")
    .data(data)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke", function(d, i) { return d3.rgb(z(i)); })
    .style("stroke-width", 2)
    .attr("d", d3.svg.line()
    .y(function(d) { return y(d.y); })
    .defined(function(d) { return d.y; }) // Omit empty values.
    .x(function(d,i) { return x(i); }));

これは、行の先頭と末尾の空の値に対して機能します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]