2

次のように、データをネストしています。

data  
    > key
    > values
       > date
       > reldif
       > absdif

線図ではすべてが正常に機能します。

var line = svg.selectAll(".lines")
  .data(data, function(d) { return d.key; })
  .enter()
  .append("g")
  .attr("class", "lines")
  .append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return color(d.key); })
  .style("stroke-width", 4)

しかし、円に同じ手法を使用しようとすると、惨めに失敗しています。私が理解している限りでは、x、y、および r が必要です (これらは 5 程度のように絶対値にすることができます)。X は日付、Y は relif でなければなりません。これらの値にアクセスするにはどうすればよいですか? d.values だけを使用すると、この方法では処理できない配列が渡されます。

(一般に、D3 のネストされたデータのチュートリアルについて提案がある場合は、それらの提案を喜んでお聞きします。私が見つけたものは、グラフに使用することを除いて、すべてのトピックを扱います)

4

2 に答える 2

2

線と円には根本的な違いがあります。線は点の集まりを表し、円は単一の点を表します。実際には、これは線を作成するために使用するデータ要素が配列であることを意味しますが、円の場合は 1 つのデータ ポイントにすぎません。

あなたの例では、配列 ( d.values) を描画プリミティブに渡しています。これは単一のデータムを想定しているため、円では機能しません。その場合に必要なのは、同じ「線」に属する円のグループ化要素を導入するネストされた選択です。コードは次のようになります。

svg.selectAll("g")
   .data(data, function(d) { return d.key; })
   .enter()
   .append("g")
   .selectAll("circle")
   .data(function(d) { return d.values; })
   .enter()
   .append("circle")
   .attr("cx", function(d) { return x(d.date); })
   // etc

コードの最初の部分は同じですが、要素を追加した後、の要素を表す のgサブセレクションを作成しています。その後、コードは再び単純になり、s が追加され、通常の方法で構成されます。circled.valuescircle

一般的に、ネストされたデータをグラフに使用する方法は、特定のグラフに大きく依存します。折りたたみ可能なツリーはコード ダイアグラムとは異なります。ネストされた選択に関するチュートリアルは読む価値がありますが、この特定のケースでは、実際にはネストされたデータの問題ではなく、さまざまなグラフィック要素が表すさまざまなものの問題です。

于 2013-11-03T11:15:18.470 に答える
1

ネストされたデータを処理するために、ネストされた選択を作成できます。ここで紛らわしいのはlines、ネストされた選択が必要ないことです。

この線の描画方法は、pathSVG 要素を使用して描画されるため、D3 では少し特殊です。この要素には、DSLを受け入れるpath1 つの属性があります。この文字列は少し扱いに​​くいため、D3 にはヘルパー オブジェクトが用意されています。dd3.svg.line

このヘルパー オブジェクトでは、線を作成するおよびポイントを決定するxおよびyアクセサーを設定できます。このオブジェクトを使用すると、ラインの他の多くのプロパティを設定することもできます (必要な補間の種類など)。最後に、このヘルパー オブジェクトを関数として呼び出すことができ、パスの属性に必要な DSL を生成します。xydatad

ここに貼り付けた例では、次のように使用されています.attr("d", function(d) { return line(d.values); })。以前のどこかで、このlineオブジェクトは への呼び出しによって作成され、アクセサが に設定され、アクセサが に設定されd3.svg.lineている可能性があります。x.x(function (d) { return d.date; })y.y(function (d) { return d.reldif; }

注:line呼び出しの結果を再度割り当てると、変数がオーバーライドされますline。これを行うと、JSHint が警告します。

circle要素はかなり単純になりました。ここでは、ヘルパー関数は必要ありません。指摘したように、中間の DSL なしxで ,yおよび属性を直接設定できるからです。rしたがって、次のようになります。

var circles = svg.selectAll(".circles")
    .data(data, function(d) { return d.key; })
    .enter()
    .append("g")
    .attr("class", "circles")
  .selectAll(".circle")
    .data(function (d) { return d.values; })
    .enter()
    .append("circle")
    .attr("class", "circle")
    .attr("cx", function(d) { return d.date; })
    .attr("cy", function(d) { return d.reldif; })
    .attr("r", 5)
    .style("stroke", function(d) { return color(d.key); })
    .style("stroke-width", 4)

d.values.dateが実際にdate数値ではなくオブジェクトである場合は、timeスケールを使用して適切な数値に変換できます。

于 2013-11-03T11:16:45.277 に答える