时间戳

首页 > 解决方案 > 使用 dc.js 和 crossfilter 的面积图

dc.js - 使用 dc.js 和 crossfilter 的面积图

问题描述

我使用 dc.js 和 crossfilter 创建了一个折线图。该图表目前如下所示：

折线图

必需：我希望左上角的活动非活动图例位于图表下方（底部）的中心位置，x 轴刻度标签应该从一月到十二月开始。我在下面添加我的代码。谢谢你。

const dateNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];


var data = [
    {date: "2011-11-14T16:17:54Z", quantity: 2, active: 1000, inactive: 100, type: "tab", city: " "},
    {date: "2011-11-14T16:20:19Z", quantity: 2, active: 190, inactive: 100, type: "tab", city: "Berlin"},
    {date: "2011-11-14T16:28:54Z", quantity: 1, active: 300, inactive: 200, type: "visa", city: " "},
    {date: "2011-11-14T16:30:43Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: "Amsterdam"},
    {date: "2011-11-14T16:48:46Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-11-14T16:53:41Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-11-14T16:54:06Z", quantity: 1, active: 100, inactive: 0, type: "cash", city: " "},
    {date: "2011-11-14T16:58:03Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-11-14T17:07:21Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-11-14T17:22:59Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-11-14T17:25:45Z", quantity: 2, active: 200, inactive: 0, type: "cash", city: " "},
    {date: "2011-11-14T17:29:52Z", quantity: 1, active: 200, inactive: 100, type: "visa", city: ""}
  ];

  data.forEach(function(d){
    var tempDate = new Date(d.date);
    d.date = tempDate;
  
  })
  
  var facts = crossfilter(data);
  var all = facts.groupAll();
  
  
  //table
  var dateDimension = facts.dimension(function(d){ return d.date; });
  //line chart
  
  var dateGroup = dateDimension.group().reduceSum(function(d){ return d.active; });
  var dateGroupTip = dateDimension.group().reduceSum(function(d){ return d.inactive; });
  
  var minDate = dateDimension.bottom(1)[0].date;
  var maxDate = dateDimension.top(1)[0].date;

  var lineChart = dc.lineChart("#test")
    .width(700)
    .height(200)
    .brushOn(false)
    .margins({top:10,bottom:30,right:10,left:70})
    .dimension(dateDimension)
    .group(dateGroupTip,"inactive")
    .stack(dateGroup,"active")

    .renderHorizontalGridLines(true)
    .renderArea(true)
    .renderDataPoints(true)
    // // .interpolate('basis')
    // lineChart.xAxis().ticks(d3.timeMonth, 1)
    // lineChart.xAxis().tickFormat(d3.timeFormat('%b'))
    .clipPadding(data.length)
    .legend(dc.legend().y(10).x(0).itemHeight(12).gap(5))
    // .xAxis()
    // .ticks(d3.time.month, 7)
    // .tickFormat(d3.time.format('%e'));
    // .xAxis().tickFormat(d3.time. format('%B'))
    // .xUnits(d3.time.months)
    .x(d3.scaleLinear().domain([minDate,maxDate]))
    lineChart.yAxis().ticks(6);
    lineChart.xAxis().ticks(12);

dc.renderAll();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="dc.css"/>

    <script src="d3.js"></script>
    <script src="crossfilter.js"></script>
    <script src="dc.js"></script>
</head>
<body>
    <div id="test"></div>
    <!-- <script src="app.js"></script> -->
    <script src="play.js"></script>
</body>
</html>

标签： dc.jscrossfilter

解决方案

看起来您已经了解了大部分内容，并且对 D3 第 3 版到第 4 版的 API 更改感到困惑？

除了这些更改（例如d3.time.months更改为d3.timeMonths. 你不是唯一一个——这些变化给我们所有人带来了很多困惑。

最后的步骤是

  1. 使用时间尺度：.x(d3.scaleTime().domain([minDate,maxDate]))
  2. d3.timeMonth在维度定义和minDate/maxDate计算中，使用 将日期向下舍入到月初，例如var dateDimension = facts.dimension(function(d){ return d3.timeMonth(d.date); });
  3. 告诉图表如何计算要显示的点数：.xUnits(d3.timeMonths)
  4. 格式化 x 轴刻度：lineChart.xAxis().tickFormat(d3.timeFormat('%B'))

您拥有其中的大部分，只是注释掉了。可能是因为您找到了使用 D3v3 API 的示例，并且它们导致了错误？

至于图例，dc.js 在这里没有做任何复杂的事情 - 您只需手动布置它，在图表上设置边距以留出足够的空间，并在图例上设置x和y以将图例放在您想要的位置.

我找到

lineChart
    .margins({top:10,bottom:60,right:25,left:40});
    .legend(dc.legend().y(165).x(325).itemHeight(12).gap(5))

效果很好，但是您必须对其进行调整以适应口味（不幸的是，当您的数据更改导致事物大小发生变化时）。

带有时间刻度和底部图例的屏幕截图

这是一个工作小提琴。. 我冒昧地更改了您的示例数据，以便它包含所需的月份。

如果您的数据跨越多年，您将在此设计中遇到麻烦，但我想您可以跨过那座桥。

推荐阅读