绘制 javascript 交叉过滤器维度的各个方面（使用 d3 和交叉过滤器的数量与时间）

Question

我正在尝试使用 D3 和交叉过滤器绘制一些数量的折线图，在本例中为“香蕉”与时间的关系。图的维度方面似乎没有反映我输入的维度值，尽管这可能是交叉过滤器的概念问题，因为我是新手。下面是我正在使用的脚本和输出图，如您所见，y-axis 运行 0-6，香蕉和时间有 11 个独特的输入。我看过的此类图的其他示例似乎绘制了相当于香蕉数量方面的图（在本例中从 8 到 668），所以我希望能弄清楚我的 Y-axis 以及如何 re-write 我的代码，它实际上绘制了消耗的香蕉数量作为时间的函数。

    //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

绘制 javascript 交叉过滤器维度的各个方面（使用 d3 和交叉过滤器的数量与时间）

plot individual aspects of a javascript crossfilter dimension (quantity vs time using d3 and crossfilter)

crossfilter

dc.js