D3js Scatter Plot에서이 데이터를 사용하는 방법은 무엇입니까?

Question

I 포맷에 따라 데이터를 가지고 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"} 
     ], 
    ... 
} 

그 다만, I는 각각 0, 1, 2, N이 산점도위한 새로운 시리즈로 처리 할 그 동안 N (0, 1, 2 또는 N)으로 제공된 X, Y를 사용하여 도트를 그려야합니다.

1. 는 산포도이 데이터 좋은가 :

   내 명백한 혼란은 약 포인트를 따르고 있습니다? 그렇지 않다면, 가장 좋은 그래프가되어야합니다 (기존의 예제는 두 경우 모두 훌륭합니다).

2. 이 데이터를 d3.min() 및 d3.max()에 사용하는 방법은 무엇입니까?

3. 이 데이터를 사용하여 X 축과 Y 축의 비율을 정의하는 방법은 무엇입니까?

도움을 주신 데 대해 감사드립니다. 미리 감사드립니다.

Answer 1

저는 D3을 처음 사용했지만 alignedleft으로 안내 할 수 있습니다. 튜토리얼은 정말 도움이되며 질문은 키, 값 객체에 대해 설명합니다.

Answer 2

이 코드 동반하는 바이올린이있다 : http://jsfiddle.net/GyWpN/13/

원유를하지만 요소가있다.

1. 이 데이터는 Scatter Plot에 적합합니까? 그렇지 않다면 최상의 그래프가되어야합니다 (기존 사례는 두 경우 모두 훌륭합니다).

   이 데이터는 산점도로 작동합니다. '최고의'그래프는 데이터가 나타내는 것과 사용자가이를 어떻게 해석 할 것인가에 달려 있습니다.

2. 이 데이터를 d3.min() 및 d3.max()에 사용하는 방법은 무엇입니까?

   잘 로, X 및 Y 축에 대한 배율을 정의하기 위해이 데이터를 사용하는 방법

3. 아래

   참조 코드?

   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) });