dc-js折线图显示平均变化时的额外填充线

Question

我正在使用库dc-js来显示折线图.据我所知,一切都运作良好.图表甚至大部分显示正确.但是,除了我在图表上想要的线条之外,还有一条黑色线条位于蓝色线条后面,它是黑色的.黑线是从第一个值到最后一个值的单个线性增量.

这是我的代码:

var stripeData = <Data>;
var mrrLineChart  = dc.lineChart("#line-chart");
var data = [];
// console.log(stripeData);
stripeData.forEach(function (dat) {
    // console.log(dat.created);
    data.push({date: parseDate(dat.created.substr(0, 10)), amount: dat.amount});
});

// console.log(data);

var ndx = crossfilter(data);
var dateDim = ndx.dimension(function(d) { 
    return d.date; 
});
var amount = dateDim.group().reduceSum(function(d) { return +d.amount; });
// console.log(amount);
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;

// console.log(minDate);
// console.log(maxDate);

mrrLineChart.width(960)
    .height(150)
    .margins({top: 10, right: 50, bottom: 50, left: 50})
    .dimension(dateDim) 
    .group(amount, "Amount")
    .transitionDuration(500)
    .brushOn(false)
    .renderArea(true)
    .renderDataPoints(true)
    .title(function(d){
        return (d.key.getMonth()+1) + "/" + d.key.getDate() + "/" + d.key.getFullYear() + "\nAmount: $" + d.value.toFixed(2);
      })
    .elasticY(true)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .xAxisLabel("Date")
    .yAxisLabel("Revenue")
    .render()
    ;

我们的想法是按天分组交易,并总结每天的收入.

Answer 1

这看起来像是 CSS 问题。如果没有发布 HTML 和 CSS，有点难以判断，但猜测一下，您应该添加：

fill: none;

到您在 SVG 元素中使用的 CSS 类之一。dc.js 发行版附带的 dc.css 文件通常会处理这个问题，但也许它已经被编辑过。