今天如何在折线图上添加垂直线?

时间:2018-06-28 16:46:54

标签: 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),结果相同。

知道我做错了什么吗?

0 个答案:

没有答案
相关问题