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

如何解决绘制 javascript crossfilter 维度的各个方面使用 d3 和 crossfilter 的数量与时间

我正在尝试使用 D3 和交叉过滤器绘制一些数量的折线图，在本例中为“香蕉”与时间。绘图的维度方面似乎没有反映我输入的维度值，尽管这可能是 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,{"bananas": 248.8395210863092,{"bananas": 8.122345566789,{"bananas": 9.8395210863092,{"bananas": 58.86904272742,{"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();

Bananas Vs Time Plot

解决方法

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

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

     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