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 的新手，但我可以指导您向左对齐，他的教程非常有帮助，并且您的问题从键接受，值对象得到解释。

于 2012-12-17T18:18:43.700 回答