Как передать многозначные данные хороплету в dc.js

Question

Я работаю над перекрестным фильтром между линейным графиком и хороплетом. Недавно я получил гораздо лучшее представление о методе Reduce в dc.js, поэтому я хочу передать еще несколько метаданных о каждой точке данных в мою линейную диаграмму и в мой хороплет. Это очень хорошо работает для линейного графика, и теперь у меня есть всплывающая подсказка, показывающая много информации о каждой точке.

Однако для моего хороплета переход к использованию Reduce вместо ReduSum действительно испортил мои данные. Например:

1. Значение, передаваемое во всплывающую подсказку, - это не те данные, которые я ожидал, и я понятия не имею, откуда исходит вычисление (почти кажется, что оно из пути SVG или даже из средства доступа к цвету?)
2. Когда я переключаюсь между различными изображениями хороплета, мой хороплет меняется, но значение во всплывающей подсказке остается точно таким же
3. Первоначальный рендеринг хороплета показывает полностью синюю карту, поэтому в любом случае кажется, что начальное значение может быть неправильным.

Я пытаюсь понять, как я могу определить точку данных, которая поступает из группы, использовать ее для визуализации хороплета на основе определенного значения (total_sampled_sales), а затем передать эти данные во всплывающую подсказку, чтобы значение каждого состояния и метаданные могут отображаться.

Кроме того, любые советы по отладке этого типа проблемы будут с благодарностью. Как вы можете видеть из моих console.logs, мне трудно отследить данные до всплывающей подсказки. Это предположительно проблемный блок:

us1Chart.customUpdate = () => {
        us1Chart.colorDomain(generateScale(returnGroup()))
        us1Chart.group(returnGroup())
      }
      us1Chart.width(us1Width)
        .height(us1Height)
        .dimension(stateRegion)
        .group(returnGroup())
        .colors(d3.scaleQuantize().range(colorScales.blue))
        .colorDomain(generateScale(returnGroup()))
        .colorAccessor(d => {
          // console.log('colorAccessor:', d)
          return d ? d : 0
        })
        .overlayGeoJson(statesJson.features, "state", d => {
          // console.log(`geojson`, d, d.properties.name)
          return d.properties.name
        })
        .projection(d3.geoAlbersUsa()
          .scale(Math.min(getWidth('us1-chart') * 2.5, getHeight('us1-chart') * 1.7))
          .translate([getWidth('us1-chart') / 2.5, getHeight('us1-chart') / 2.5])
        )
        .valueAccessor(kv => {
          // console.log(kv.value)
          if (kv.value !== undefined) return kv.value
        })
        .renderTitle(false)
        .on('pretransition', (chart) => {
          chart.selectAll('path')
            .call(mapTip)
            .on('mouseover.mapTip', mapTip.show)
            .on('mouseout.mapTip', mapTip.hide);
        })

https://jsfiddle.net/ayyrickay/f1vLwhmq/19/

Обратите внимание, что данные немного шаткие, потому что я удалил половину записей только для ограничения размера

Answer 1

Из-за привязки данных к хороплетам я сейчас использую данные, которые были переданы (в частности, выбранный штат США), а затем идентифицирую точку данных в группе кроссфильтров:

const selectedState = returnGroup().all().filter(item => item.key === d.properties.name)[0]

Итак, у меня есть метод returnGroup, который выбирает правильную группу хроноплетов (на основе некоторого состояния приложения), получает список, а затем я фильтрую, чтобы увидеть, какой элемент соответствует свойству name, переданному во всплывающую подсказку. Поскольку фильтр возвращает массив, я просто оптимистично настроен, что он будет фильтровать один элемент, а затем использовать этот элемент. Затем у меня есть доступ к полной точке данных, и я могу соответственно отобразить ее во всплывающей подсказке. Не элегантно, но это работает.