Question

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

line chart

必需：我希望活动不活动的图例位于左上角，位于图表中心的下方（底部），并且x轴刻度标签应从1月到12月开始。我在下面添加代码。谢谢。

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]))
在维度定义和d3.timeMonth / minDate计算中，例如，使用maxDate将日期向下舍入到月初。 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并没有做任何复杂的事情-您只需要手动进行布局，设置图表上的边距以留出足够的空间，并设置x和{{1 }}在图例上，将图例放置在所需位置。

我发现

工作得很好，但是您必须对其进行调整以使其具有品味（不幸的是，当数据更改导致事物大小发生更改时。）

Here's a working fiddle.。我可以自由更改示例数据，使其包含所需的月份。

如果您的数据跨越多年，您将在设计上遇到麻烦，但是我想您可能会跨过那座桥梁。

使用dc.js和crossfilter的面积图

1 个答案: