为什么同一组没有呈现正确的折线图和对应的范围图？答案

【问题标题】：Why doesn't the same group render a correct line chart and corresponding range chart?为什么同一组没有呈现正确的折线图和对应的范围图？
【发布时间】：2018-09-05 07:47:22
【问题描述】：

在这里提琴：https://jsfiddle.net/8yf7j3k6/11/

我正在尝试为我的范围图引入类似的数据表示，以便我可以在范围图上擦洗，但在流通数据的实际折线图中使用工具提示。目前，我认为我有两个问题正在破坏我的交叉过滤器并导致范围图看起来很乱：

如果我使用交叉过滤器生成的标准组，我最终会得到一个值（循环数据 * number_of_regions_in_which_magazine_was_circulated）。为了绕过这个，我创建了一个地图来跟踪区域的数量，并划分表示的值。我不知道如何为此创建一个组，并在数据级别处理它。结果，我只是在渲染步骤进行更正 - 这可能是我的问题的原因吗？
我对折线图和范围图使用完全相同的组。在NASDAQ sample 中，他们似乎以不同的方式处理数据，但似乎他们只是以不同的方式对数据进行分箱，并没有做出巨大的改变。我不明白为什么我的图表在零点有如此显着的负值。

下面有问题的图表的代码。请注意，由于没有用于 dateformat 的 CDN

    lineChart1
      .width(lineChart1Width-50)
      .height(lineChart1Height-50)
      .xUnits(d3.timeMonths)
      .margins({ top: 10, right: 10, bottom: 20, left: 80 })
      .dimension(dimension1)
      .rangeChart(lineChart1Range)
      .group(circulationGroup1)
      .colors(colorScales.blue[colorScales.blue.length - 1])
      .elasticY(true)
      .brushOn(false)
      .valueAccessor(function (d) {
          return d.value / circulationValuesMap[d.key]
      })
      .title(function (d) {
          return `${d.key.format('mmm dd, yyyy')}\nCirculation: ${d.value / circulationValuesMap[d.key]} `
      })
      .x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
      .render()


    lineChart1Range
      .width(getWidth('line-chart-1-range')) /* dc.barChart('#monthly-volume-chart', 'chartGroup'); */
      .height(40)
      .margins({top: 0, right: 50, bottom: 20, left: 80})
      .dimension(dimension1)
      .group(circulationGroup1)
      .valueAccessor(d => d.value / circulationValuesMap[d.key])
      .centerBar(true)
      .x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
      .round(d3.timeMonth.round)
      .alwaysUseRounding(true)
      .xUnits(() => 200);

    lineChart1Range.yAxis().ticks(0)

【问题讨论】：

标签： javascript d3.js data-visualization dc.js crossfilter

【解决方案1】：

问题在于你的 CSS。

此规则适用于.line-chart-container 内的any 元素的每个第一个子元素，也适用于画笔覆盖层。

.line-chart-container :nth-child(1) {
  height: 15em;
}

:nth-child(2) 也是如此。

替换实际div元素的2个CSS高度规则

#line-chart-1 {
  height: 15em;
}
#line-chart-1-range {
  height: 2em;
}

删除 2 个大条。

你的折线图和范围图也没有对齐，它们有不同的宽度和边距。

lineChart1Range
  //.width(getWidth('line-chart-1-range')) /* dc.barChart('#monthly-volume-chart', 'chartGroup'); */
  .width(lineChart1Width-50)
  .height(40)
  //.margins({top: 0, right: 50, bottom: 20, left: 80})
  .margins({top: 0, right: 10, bottom: 20, left: 80})
  .dimension(dimension1)
  .group(circulationGroup1)
  .valueAccessor(d => d.value / circulationValuesMap[d.key])
  .centerBar(true)
  .x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
  .round(d3.timeMonth.round)
  .alwaysUseRounding(true)
  .xUnits(() => 200);

所有栏都有工具提示，您看不到它们，因为画笔正在捕获所有鼠标事件。也许可以禁用此图表的工具提示

【讨论】：