绘制javascript crossfilter维度的各个方面(使用d3和crossfilter的数量与时间)

Question

我正在尝试使用D3和crossfilter绘制一些数量的折线图，在本例中是"bananas“和”Time“。绘图的尺寸方面似乎没有反映我输入的尺寸值，尽管这可能是crossfilter的概念问题，因为我还不熟悉它。下面是我正在使用的脚本和输出图，您可以看到y轴运行0-6，有11个唯一的香蕉和时间输入。对于这种类型的图，我查看过的其他示例似乎绘制了与香蕉的数量方面相当的图(在本例中，数量方面从8到668 )，所以我希望对Y轴上的确切内容以及如何重写代码有一些清楚的了解，以便它实际绘制消耗的香蕉数量作为时间的函数。

    //declare new variable, chart and select the dc chart type 
    var chart =     new dc.LineChart("#lineChart");
//insert the data you wish to plot 
     var data1 = [ 
     {"bananas": 22.28876521596685, "Timestamp":'2021-01-19 17:06:50.239197'},
     {"bananas": 25.8395210863092,  "Timestamp": '2021-01-19 17:16:52.181954'},
     {"bananas": 23.11122495696,  "Timestamp": '2021-01-20 17:21:52.181954'},
      {"bananas": 28.8395210863092,  "Timestamp": '2021-01-21 17:26:52.181954'},
      {"bananas": 38.32323232232,  "Timestamp": '2021-01-21 17:26:52.181954'},
      {"bananas": 248.8395210863092,  "Timestamp": '2021-01-21 17:26:52.181954'},
      {"bananas": 8.122345566789, "Timestamp": '2021-01-21 17:26:52.181954'},
      {"bananas": 9.8395210863092,  "Timestamp": '2021-01-21 17:26:52.181954'},
      {"bananas": 58.86904272742, "Timestamp": '2021-01-21 17:26:52.181954'},
      {"bananas": 668.642100932,  "Timestamp": '2021-01-22 17:26:52.181954'},
      {"bananas": 68.8395210863092,  "Timestamp": '2021-01-21 18:26:52.181954'},
     ];

// convert the timestamp data into something that js can understand 
    data1.forEach(function (d) {
        d.Timestamp = new Date(d.Timestamp);
    }); 
    //log the updated values to the console (troubleshooting)
    console.log(data1)


    // set crossfilter with first dataset
    var xfilter = crossfilter(data1),
   // var all = xfilter.groupAll();

        //Define the Dimensions 
            bananasDim = xfilter.dimension(function (d){return +d.bananas;})
            console.log(bananasDim.top(Infinity)) 
            //this prints out the entire data1 json in the console 
            TimeDim = xfilter.dimension(function (d){return d.Timestamp;});     
            
       //Define the Group elements 
         bananasGroup= bananasDim.group()
         TimeGroup=TimeDim.group()
         console.log(bananasGroup)
         console.log(TimeGroup)

    function render_plots(){
 
         chart
            .width(768)
            .height(480)
            .x(d3.scaleTime().domain([0,200])) //this defines a range of 0 to 200
            // but we use elasticX so its not really relevant 
            .curve(d3.curveLinear)
            .renderArea(true)
            .brushOn(false)
            .renderDataPoints(true)
            .clipPadding(10)
            .elasticX(true)
            .elasticY(true)
            .dimension(bananasDim)
            .group(TimeGroup);

        dc.renderAll();
    }

    render_plots();

​

​

Answer 1

感谢您将完整的工作示例包含在您的问题中。

这看起来像是一张按时间计数的图。如果你想计算香蕉的总和，你可以使用

     TimeGroup=TimeDim.group().reduceSum(d => d.bananas)

此外，对于特定的图表，组通常应该从相同的维度实例化：

        .dimension(TimeDim)

这是因为组将用于获取数据，而维度将用于过滤。

您可能还希望设置分辨率，以便聚合不完全相同的时间。例如，您可以这样做：

        TimeDim = xfilter.dimension(function (d){return d3.timeHour(d.Timestamp);});     
      // ...
      chart
        .xUnits(d3.timeHours)

四舍五入到小时(类似于天)。

​

​

demo fiddle