为什么在线图的上方和下方都会渲染黑色区域？

Question

我有三个使用dc.js渲染的图表，所有这些图表在线下方或上方呈现黑色区域​​。我通过dc.css文件查看了相关的任何填充选项，但我找不到任何具有正面效果的填充选项。

我用Angular 7作为开发我的应用程序的框架。 Json Data采用这种形式，有几种不同的设备类型：

{
device_ID: "DHT11-3fe381"
​​​​
device_type: "thermometer"
​​​​
time: "2019-02-26T00:56:54.000Z"
​​​​
value: 25.9
}

我使用crossfilter创建一个timeDim维度，并根据device_type对每个值进行排序：

    const timeDim = ndx.dimension((d) => d.time);

    var Thermo = timeDim.group().reduceSum((d) => {
      if (d.device_type === 'thermometer' && d.value <= 40) {
        return d.value;
      } else {
        return 0;
      }
    });

然后，我创建我的图表：

const DTchart = dc.compositeChart('#graphT');

    DTchart
      .width(800)
      .height(300)
      .margins({top: 10, right: 50, bottom: 100, left: 60})
      .dimension(timeDim)
      .group(device, 'value')
      .xUnits(d3.timeMinutes)
      .x(d3.scaleTime().domain([bottomDate, topDate]))
      .yAxisLabel('Thermometer reading')
      .xAxisLabel('Time')
      .brushOn(false)
      .elasticX(true)
      .elasticY(true)
      .controlsUseVisibility(true)
      .renderHorizontalGridLines(false)
      .compose([
        dc.lineChart(DTchart)
          .dimension(timeDim)
          .renderArea(false) // This didn't contribute anything
          .colors('RED')
          .group(Thermo) 
          .valueAccessor((d) => d.value)]
      );

Answer 1

用于折线图的SVG path元素的默认值是显示填充黑色，

如果你包括dc.css它将set fill: none。轴字体更适合，轴线也更窄。

你没有问，但我认为垂直的红线是由于你的数据中的零。如果缺少数据，您可以考虑使用lineChart.defined在行中添加间隙而不是降为零。