使用 dc.js 和交叉过滤器的面积图

Question

我使用 dc.js 和交叉过滤器创建了折线图。当前图表如下所示：

必填：我希望左上角的活动非活动图例位于中心图表的下方（底部），并且 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>

Answer 1

看起来您已经弄明白了大部分内容，并且对 D3 版本 3 到版本 4 API 的变化感到困惑？

除了 these changes 之外，您注释掉的许多行都是正确的 - 例如 d3.time.months 更改为 d3.timeMonths。你不是唯一的人 - 这些变化给我们所有人带来了很多困惑。

最后的步骤是

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

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

至于图例，dc.js 在这里没有做任何复杂的事情 - 您只需手动对其进行布局，设置图表上的边距以允许足够的 space，然后设置 x 和 y 在图例上将图例放在您想要的位置。

我发现

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

工作得很好，但您必须根据自己的口味对其进行调整（不幸的是，当数据更改导致数据大小发生变化时）。

Here's a working fiddle.。我冒昧地更改了您的示例数据，以使其包含所需的月份。

如果您的数据跨越多年，您将运行因这种设计而陷入困境，但我想您可以在遇到它时跨过那座桥。

使用 dc.js 和交叉过滤器的面积图

Area chart using dc.js and crossfilter

crossfilter

dc.js