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文件通常会处理这个问题，但也许它已被编辑过。

Answer 2

即使在dc.css中应用fill：none似乎是合乎逻辑的，但它并不适用于我。最初的解决方案是：

.on('renderlet', function (chart) {
    d3.selectAll('.line')
    .style('fill', 'none')

然后它首先使用填充（在componentDidMount，React中）。然后我决定将样式放在index.html页面中，如https://bl.ocks.org/mbostock/1166403所示：

  <style>
         path.line {
         fill: none;
         stroke: green;
         stroke-width: 1.5px;
         }
  </style>

这个工作得很好，但仍然有兴趣在CSS中应用样式而不是将样式放入html。