dc.js - 今天如何在折线图上添加垂直线?
问题描述
我有一个 x 轴为日期的图表,我试图在今天画一条线
var graph=dc.compositeChart(dom)
.margins({top: 0, right: 50, bottom: 20, left:30})
.height(150)
.width(0)
.dimension(dim)
.x(d3.time.scale.utc().domain([dim.bottom(1)[0].dd,dim.top(1)[0].dd]))
.round(d3.time.day.utc.round)
.elasticY(true)
.xUnits(d3.time.days.utc);
它工作正常,如果我手动创建一个过滤器,它会正确地使用正确的日期范围
但是,当我尝试为今天添加一行时:
function today (chart) {
var x_vert = d3.time.day.utc(new Date());
var extra_data = [
{x: chart.x()(x_vert), y: 0},
{x: chart.x()(x_vert), y: chart.effectiveHeight()}
];
var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate('linear');
var chartBody = chart.select('g');
var path = chartBody.selectAll('line#today').data([extra_data]);
var path = path.enter()
.append('path')
.attr('class', 'today')
.attr('stroke', 'red')
.attr('id', 'today')
.attr("stroke-width", 1)
.style("stroke-dasharray", ("10,3"));
path.attr('d', line);
};
graph.on('pretransition', today);
它确实划定了界限……但是在错误的位置(在左侧更远)。
我应该考虑利润或其他什么吗?我尝试了不同的事件(renderlet),结果相同。
知道我做错了什么吗?
解决方案
推荐阅读
- javascript - 添加/删除/删除后 JQGrid 不会重新加载更新
- python - 在读取到 Pandas 系列的 .read_csv 期间集成 if 条件
- maven - Jenkins管道mvn:找不到命令
- scala - 如何为从 json 文件读取的 spark 应用程序编写单元测试
- excel - 将变量添加到 R1C1 公式中
- r - 将 R 中的面板数据重组为列
- python - 移动 PyCharm 项目文件夹并保留对 python 解释器的引用
- python-3.x - PySide2 如何取消分配当前布局并将新布局分配给窗口小部件?.count() 给出属性错误?
- react-native - React Native 错误:元素类型无效:应为字符串或类/函数,但得到:未定义
- javascript - 使用 jQuery 重置特定的表单输入