Question

参考http://bl.ocks.org/mbostock/4061502我尝试实现从JSON读取数据的Box图。从csv读取的代码是

d3.csv("morley.csv", function(error, csv) {
var data = [];

csv.forEach(function(x) {
var e = Math.floor(x.Expt - 1),
    r = Math.floor(x.Run - 1),
    s = Math.floor(x.Speed),
    d = data[e];
if (!d) d = data[e] = [s];
else d.push(s);
if (s > max) max = s;
if (s < min) min = s;
});

csv数据：

Expt,Run,Speed
1,1,850
1,2,740
1,3,900
1,4,1070
1,5,930
1,6,850
1,7,950
1,8,980
1,9,980
1,10,880

我将csv替换为json，如下所示：

d3.json("morley.json", function(json) {
var data = json.data;
var ChartData = [];// Should Contain speed values
data.forEach(function(d,i){
  chartData.push(d.Speed);
});   
var min = d3.min(data, function(d){return d.Speed});
var max = d3.max(data, function(d){return d.Speed})

我的json是：

{
"data": [
    {
        "Expt": 1,
        "Run": 2,
        "Speed": 850
    },
    {
        "Expt": 1,
        "Run": 3,
        "Speed": 740
    },
    {
        "Expt": 1,
        "Run": 4,
        "Speed": 900
    },
    {
        "Expt": 1,
        "Run": 5,
        "Speed": 1070
    },
    {
        "Expt": 1,
        "Run": 6,
        "Speed": 930
    }]
}

当我们调用d3.box方法

时

 var chart = d3.box()
            .whiskers(iqr(1.5))
            .width(width)
            .height(height); 

d3.box = function() {

// For each small multipleâ€¦
function box(g) {
g.each(function(d, i) {
    alert(d);
  d = d.map(value).sort(d3.ascending); // error at this line saying object dont have method map
  alert(d);
  var g = d3.select(this),
      n = d.length,
      min = d[0],
      max = d[n - 1];

当我从csv读取时我没有得到错误但是当我从JSON读取时我得到这个对象没有方法映射错误。有什么不同？

Answer 1

就像这样

{
     "Speed": [850, 740, ...],
     "Expt": [1, 1, ...],
     "Run": [1, 2, ...]
}

如果删除第二个参数，这是json.speed有意义且d3.min/max返回预期结果的唯一方式。

使用您的数据结构，要获得最低速度，正确的命令是

d3.min(json.data, function(d) { return d.Speed; });

Answer 2

你的问题是：

    var data = json.data; 
    var ChartData = [];// Should Contain speed values
    data.forEach(function(d,i){
     chartData.push(d.Speed);
    });   
   var min = d3.min(data, function(d){return d.Speed});
   var max = d3.max(data, function(d){return d.Speed})

它为我工作：

  var jsondata = json.data;
    var chartData = [];// Should Contain speed values
    jsondata.forEach(function(d,i){
        var e = Math.floor(d.Expt - 1),
                r = Math.floor(d.Run - 1),
                s = Math.floor(d.Speed),
                d = chartData[e];
            if (!d) d = chartData[e] = [s];
            else d.push(s);
            if (s > max) max = s;
            if (s < min) min = s;
    });

我希望我能帮到你。

d3.js中的Box Plot实现

2 个答案: