0

非常に単純なデータセットがあります。次のような 3 つの値のみ (時間の経過とともにさらに増加する可能性があります):

{a=10, b=20, c=30}

これらの値を棒グラフのようなもので視覚化しようとしています。しかし、単純なバーの代わりに、領域で描かれた派手なグラフィックを使用したいと考えています。

現時点では、データを変更することによってのみこれを機能させることができます。for ループでデータを読み取り、各データポイントのエリア ポイントの配列を挿入して、より大きなデータ セットを作成します。そのため、問題なく動作する vis に供給する 3 次元配列があります。

しかし、視覚化の代わりにデータを変更するのは間違っているようです。

これは、現時点で領域を作成するための私のコードです:

var g = svg.selectAll("path.area")
    .data(displayData)      // dimension of data should be 3D
    .enter()
    .append("g")
    .attr("class", "graph");

pathes = g.append("path")
    .attr("class", "area") // not the cause of your problem
    .attr("d", d3.svg.line().interpolate("linear-closed"))
    .style("stroke", function(d) { return color(d.name); })
    .style("stroke-width", 2);

このコードのどこかに関数をドロップして、各データ ポイントをきれいな方法で完全な領域に "膨張" させる方法はありますか? 何かのようなもの：

.attr("d", d3.svg.line( function(d){ return inflateMyDataPoint(d); } ))

そのような関数は何を返す必要がありますか? そして、これはそのようなものにとって正しい位置ですか？

ありがとう！マティアス

PS: 例の写真: ここに画像の説明を入力

4

1 に答える 1

1

カスタム ライン ジェネレーターはいつでも作成できます。あなたが示したような形状の場合、次のようになります。

var w = 10; // width
function generator(y) {
  var ys = scale(y);
  return "M 0 " + ys + " L 0 " + (0.1*ys) + " " + (w/2) +
         " 0 " + w + " " + (0.1*ys) + " 0 " + ys + "Z";
}

その後、次のようなことができます

g.append("path")
 .attr("d", generator)
 .attr("transform", function(d, i) {
   return "translate(" + (i*w) + "," + (height - scale(d)) + ")";
});
于 2013-06-24T17:32:53.077 に答える