0

次の形式のデータがあり、D3.js散布図で使用したい：

{
    "0": [
             {"X":"1", "Y":"1"},
             {"X":"2", "Y":"2"},
             {"X":"3", "Y":"3"},
             {"X":"4", "Y":"4"}
         ],
    "1": [
             {"X":"1", "Y":"1"},
             {"X":"2", "Y":"2"},
             {"X":"3", "Y":"3"},
             {"X":"4", "Y":"4"}
         ],
    "2": [
             {"X":"1", "Y":"1"},
             {"X":"2", "Y":"2"},
             {"X":"3", "Y":"3"},
             {"X":"4", "Y":"4"}
         ],
    ...
}

ただし、各0、1、2、およびNを散布図の新しいシリーズとして扱い、そのN（0、1、2、またはN）で提供されるX、Yを使用してドットを描画したいとします。

私の明らかな混乱は、次の点にあります。

  1. このデータは散布図に適していますか？そうでない場合は、最良のグラフを作成する必要があります（どちらの場合も既存の例が最適です）。

  2. このデータをd3.min（）およびd3.max（）で使用するにはどうすればよいですか？

  3. このデータを使用して、X軸とY軸のスケーリングも定義するにはどうすればよいですか？

どんな助けでも大歓迎です。前もって感謝します。

4

2 に答える 2

2

このコードに付随するフィドルがあります：http：//jsfiddle.net/GyWpN/13/

原油ですが、要素はそこにあります。

  1. このデータは散布図に適していますか？そうでない場合は、最良のグラフを作成する必要があります（どちらの場合も既存の例が最適です）。

    このデータは散布図で機能します。「最良の」グラフは、データが何を表しているか、およびユーザーがそれをどのように解釈するかによって大きく異なります。

  2. このデータをd3.min（）およびd3.max（）で使用するにはどうすればよいですか？

    以下のコードを参照してください

  3. このデータを使用して、X軸とY軸のスケーリングも定義するにはどうすればよいですか？

    以下のコードを参照してください 

    var myData = {
"0": [   {"X":"1", "Y":"1"},
         {"X":"2", "Y":"2"},
         {"X":"3", "Y":"3"},
         {"X":"4", "Y":"4"}  ],
"1": [   {"X":"1", "Y":"2"},
         {"X":"2", "Y":"3"},
         {"X":"3", "Y":"4"},
         {"X":"4", "Y":"5"}  ],
"2": [   {"X":"1", "Y":"7"},
         {"X":"2", "Y":"6"},
         {"X":"3", "Y":"5"},
         {"X":"4", "Y":"4"}  ]};

var width = 625,
    height = 350;

// A way to look more easily across all 'inner' arrays
var myDataDrill = d3.values( myData );

var x = d3.scale.linear()
    .domain([0, 
      // max over all series'
      d3.max( myDataDrill, function(d) { 
          // within a series, look at the X-value
          return d3.max( d, function(v) { return v.X } )  
} ) ])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max( myDataDrill, function(d) { 
      return d3.max( d, function(v) { return v.Y } ) } )])
    .range([height, 0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g");

var series = svg.selectAll( "g" )
    // convert the object to an array of d3 entries
    .data( d3.map( myData ).entries() )
    .enter()
    // create a container for each series
    .append("g")
    .attr( "id", function(d) { return "series-" + d.key } );

series.selectAll( "circle" )
   // do a data join for each series' values
   .data( function(d) { return d.value } )
   .enter()
   .append("circle")
    .attr( "cx", function(d) { return x(d.X) } )
    .attr( "r", "10" )
    .attr( "cy", function(d) { return y(d.Y) } );
于 2012-12-17T21:40:47.617 に答える
1

私は D3 を初めて使用しますが、alignedleftに誘導できます。彼のチュートリアルは非常に役に立ち、キー、値オブジェクトからの質問が説明されています。

于 2012-12-17T18:18:43.700 に答える