Почему одна и та же группа не отображает правильную линейную диаграмму и соответствующую диаграмму диапазона? - PullRequest
Новая
       13

Почему одна и та же группа не отображает правильную линейную диаграмму и соответствующую диаграмму диапазона?

0 голосов
/ 05 сентября 2018

Скрипка здесь: https://jsfiddle.net/8yf7j3k6/11/

Я пытаюсь ввести аналогичное представление моих данных для моей диаграммы диапазона, чтобы я мог просматривать таблицу диапазонов, но использовать подсказку в реальном графике данных об оборотах. В настоящее время, я думаю, у меня есть две проблемы, которые ломают мой перекрестный фильтр и заставляют диаграмму диапазона выглядеть странно:

  1. Если я использую стандартную группу, сгенерированную перекрестным фильтром, я получаю значение (данные циркуляции * number_of_regions_in_which_magazine_was_circulated). Чтобы обойти это, я создал карту, которая отслеживает количество регионов и делит представленные значения. Я не мог понять, как создать группу для этого, и обрабатывать ее на уровне данных. В результате я просто делаю исправление на этапе рендеринга - может ли это быть причиной моих проблем?

  2. Я использую одну и ту же группу для линейного графика и графика диапазона. В примере NASDAQ они, похоже, обрабатывают данные по-разному, но кажется, что они просто разбивают их по-разному, не делая кардинальных изменений. Я не понимаю, почему у моего графика такое резкое отрицательное значение в точке ноль.

Код для оскорбительных таблиц ниже. Обратите внимание, что в скрипте есть какой-то шаблон, который нужно прятать, потому что нет CDN для dateformat 

    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)

1 Ответ

0 голосов
/ 05 сентября 2018

Проблема в вашем CSS.

Это правило применяется к каждому первому дочернему элементу любого элемента, который находится внутри .line-chart-container, также к наложению кисти. 

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

Это также верно для :nth-child(2).

Замена 2 правил высоты CSS для фактических div элементов 

#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);

У всех панелей есть всплывающие подсказки, их нельзя увидеть, потому что кисть улавливает все события мыши. Возможно, возможно отключить подсказки для этого графика

...