我使用 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>最佳答案
看起来您已经弄清楚了大部分内容，并且对 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 在这里没有做任何复杂的事情——你只需要手动布局，设置图表上的边距以留出足够的空间，并设置 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 - 使用 dc.js 和 crossfilter 的面积图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56795651/