Question

我有以下格式的数据，并希望与D3.js Scatter Plot一起使用：

{
    "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绘制点。

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

这些数据对Scatter Plot有用吗？如果没有，那么什么应该是最好的图表（在任何一种情况下，现有的例子都会很棒）。
如何在d3.min（）和d3.max（）中使用此数据？
如何使用此数据定义X轴和Y轴的缩放比例？

非常感谢任何帮助。提前谢谢。

Answer 1

这段代码附带了一个小提琴：http://jsfiddle.net/GyWpN/13/

原油，但元素在那里。

这些数据对Scatter Plot有用吗？如果没有，那应该是什么最佳图表（在任何一种情况下，现有的例子都会很棒）。

此数据可在散点图中使用。 “最佳”图表在很大程度上取决于数据代表的内容以及用户对其的解释。
如何在d3.min（）和d3.max（）？
中使用此数据
见下面的代码

如何使用此数据定义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) } );

Answer 2

我是D3的新手，但我可以指导你alignedleft他的教程非常有用，你的问题可以从关键的价值对象中得到解释。

如何在D3js Scatter Plot中使用这些数据？

2 个答案: