如何在D3js散点图中使用这些数据？

Question

我有以下格式的数据和要与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被当作用于散点图一个新的系列同时想要使用X，Y提供的N（0,1,2或N）中的点。

我明显困惑是围绕以下几点：

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（）一起使用？

   下面

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