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

Question

我使用dc.js绘制了三个图表，所有这些图表都在该行下方或上方绘制了一个黑色区域。我在dc.css文件中浏览了所有相关的填充选项，但找不到任何具有积极效果的填充选项。

I'，使用Angular 7作为开发应用程序的框架。 Json Data处于这种形式，并且具有几种不同的设备类型：

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

我使用交叉过滤器创建一个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在行中插入空格，而不是降至零。