1

d3.js のスタック レイアウトを使用して積み上げ棒グラフを作成しようとしています (ここにいる場所を参照してください: http://bl.ocks.org/4676028 )。バーが正しく表示され、積み重なっています。しかし、私のデータにはギャップがあるので、そのような場合には補間値を使用しています。したがって、私のデータ ファイルには、データのカテゴリごとに 2 つの列があります。1 つは実際の数値用で、もう 1 つは値が補間かどうかを示す 0/1 フラグです。

私がやりたいことは、フラグをチェックし、値が補間されている場合は、四角形の塗りつぶしの色または不透明度を変更することです。しかし、私は一生これを行う方法を理解することはできません.d3のデータ構造は私をかなり困惑させました. どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

1

最終的にこれを理解しました。他の誰かが同様の問題に遭遇した場合に備えて投稿してください。標準の JavaScript 構文を使用して、別の配列にアクセスできます。唯一の注意点は、d3 のスタック レイアウトでは、スタック内の各シリーズのインデックス値 (i) がリセットされることです。そのため、新しいシリーズが開始されるたびにこれを追跡するある種のカウンター値が必要です。 

var n = 0;
var rect = tnum.selectAll("rect")
  .data(function(d) {return(d)})
.enter().append("svg:rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return -y(d.y0) - y(d.y); })

  .attr("height", function(d) { return y(d.y); })
  .attr("width", x.rangeBand())
  .attr("title",  function(d) { return d.x; }) 
  .attr("class", function(d) { return d.y; })
  .style("opacity", function(d, i) { 


    if(i === interp[0].length-1 && n < 2) {
    n+=1;
    }
    var flag = interp[n][i].int;

  console.log();

  if (flag == 1) {return "0.85"}    // if close is less than 400 fill = red
        else    { return "1" ;}})
于 2013-02-07T03:24:26.670 に答える