dc.js - dc.js (version 3.0.7) - 无法绘制 rangeChart ('focusChart' of undefined error)
问题描述
我无法为我的 lineChart 绘制 rangeChart。
d3.tsv("demo.tsv").then(function(someData) {
drawMarkerSelectsome(someData);
});
function drawMarkerSelectsome(someData) {
parseDate = d3.timeParse("%m/%d/%Y");
someData.forEach(function(d) {
d.dd = parseDate(d.txndatetime);
d.month = d3.timeFormat("%m")
});
xf = crossfilter(someData);
all = xf.groupAll();
// Dimension by full date
dateDim = xf.dimension(function(d) { return d.dd; });
// Dimension by month
moveMonths = xf.dimension(function (d) {
return d.month;
});
numRecordsByDate = dateDim.group().reduceCount();;
numRecordsByMonth = moveMonths.group().reduceCount();
minDate = dateDim.bottom(1)[0].dd;
maxDate = dateDim.top(1)[0].dd;
timeChart = dc.lineChart("#time-chart",groupname)
.renderArea(true)
.width(940)
.height(200)
.transitionDuration(3000)
.margins({top: 10, right: 50, bottom: 20, left: 40})
.dimension(dateDim)
.mouseZoomable(true)
.rangeChart(volumeChart)
.elasticY(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.brushOn(false)
.group(numRecordsByDate)
.x(d3.scaleTime().domain([minDate, maxDate]))
.round(d3.time.day.round)
.xUnits(d3.time.days)
.elasticY(true);
volumeChart.width(940)
.height(60)
.margins({top: 5, right: 50, bottom: 20, left: 40})
.dimension(dateDim)
.group(numRecordsByMonth)
.centerBar(true)
.gap(1)
.alwaysUseRounding(true)
.colors(['#D62728'])
.x(d3.scaleTime().domain([minDate, maxDate]))
.round(d3.time.month.round)
.xUnits(d3.time.months);
我尝试保持维度(dateDim)相同并更改了此处讨论的组(dc.js - rangeChart 条在过滤后消失),但我不断收到以下错误。
不确定代码有什么问题。我正在使用 dc.js v.3.0.7 和 d3.js v.5.7.0。
解决方案
错误是说volumeChart
未定义。您没有显示它的初始化位置,但我猜它不是。
volumeChart
您必须在调用之前将 lineChart 或 barChart 实例化为.rangeChart(volumeChart)
如果需要,您仍然可以在设置后设置其参数timeChart
。
推荐阅读
- reactjs - 将道具从导航链接传递到组件 React 路由器
- python - Scipy优化curve_fit、sigma和约束曲线问题
- jsonschema - JSON Schema $ref 属性
- google-cloud-platform - GCP 在其中查找用户的位置
- amazon-web-services - Cloudwatch 中未更新 SES 指标
- java - 我收到错误消息:线程“JavaFX 应用程序线程”中的异常 java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
- kotlin - Firebase 并发读写
- c# - 如何在 WPF 中设置 SVG 图像的颜色?
- r - 从 R 中的列中的共享值创建单位矩阵
- sql - 只允许 sql 表中的唯一组合