2014-02-25 36 views
0

我JSON的类似如下:使用多个值的Crossfilter尺寸

[ 
    { 
     "source": "Google", 
     "date": "2014-02-01", 
     "spend": 21, 
     "clicks": 1000 
    }, 
    { 
     "source": "Bing", 
     "date": "2014-02-01", 
     "spend": 5, 
     "clicks": 541 
    }, 
    { 
     "source": "Google", 
     "date": "2014-02-02", 
     "spend": 24, 
     "clicks": 1029 
    }, 
    { 
     "source": "Bing", 
     "date": "2014-02-02", 
     "spend": 12, 
     "clicks": 754 
    } 
] 

并希望将其送入Crossfilter创建具有NVD3线图。我不知道从哪里开始,但我想折线图使用如下:

  • X轴 - 日期
  • Y轴 - 点击次数每源
  • 1线

这是我在没有Crossfilter的情况下能够建立的:

(function() { 
    var ymdFormat = d3.time.format('%Y-%m-%d'); 
    d3.json('./data.json', function (err, json) { 
     nv.addGraph(function() { 
      var chart = nv.models.lineChart() 
      chart.margin({ left: 100 }) 
        .useInteractiveGuideline(true) 
        .transitionDuration(350) 
        .showLegend(true) 
        .showYAxis(true).showXAxis(true); 
      chart.xAxis 
        .axisLabel('Date') 
        .tickFormat(function (d) { 
          return d3.time.format('%b %Y')(new Date(d)); 
        }); 
      chart.yAxis 
        .axisLabel('Clicks') 
        .tickFormat(d3.format(',')); 

      data = parseData(json); 

      d3.select('#graph').append('svg') 
       .datum(data).call(chart); 
     }); 
    }) 

    function parseData(json) { 
     var data, result, key; 
     data = {}; 
     json.forEach(function (elmt) { 
      if (!(elmt.source in data)) { 
       data[elmt.source] = { values: [] } 
      } 
      data[elmt.source].values.push({ x: ymdFormat.parse(elmt.date), y: elmt.clicks }) 
     }); 

     result = []; 
     for (key in data) { 
      if (data.hasOwnProperty(key)) { 
       result.push({ 
        key: key, 
        values: data[key].values 
       }); 
      } 
     } 
     console.log(result); 
     return result; 
    } 
})() 
+0

嗨戴夫,你有没有找到答案呢?我加了我的解决方案。 –

回答

0

我有这个问题。但我有一个解决方案,但不是很好。

var filterByMonthSource = filter.dimension(function(d) { return d.date + ':' + d.source }); 
var clicksGroup = filterByMonth.group().reduceSum(function(d) { return d.clicks }); 
var clicksData = clicksGroup.all(); 

clicksData将有[{键: “2014年2月1日:谷歌”,值:...},...]

然后我必须打破clicksData到3场的阵列。