为什么在线图上方和下方都呈现黑色区域？

Question

我使用 dc.js 渲染了三个图表，它们都在线条下方或上方呈现黑色区域。我在 dc.css 文件中查看了任何相关的填充选项，但我找不到任何有积极影响的选项。

我'，使用Angular 7 作为框架来开发我的应用程序。 Json 数据采用这种形式并且有几种不同的设备类型：

{
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 在行中放置间隙而不是降为零。

为什么在线图上方和下方都呈现黑色区域​​？

Why are black areas being renderd both above and below the line graph?

dc.js

为什么在线图上方和下方都呈现黑色区域？