如何将多值数据传递到 dc.js 中的等值线

Question

我正在研究折线图和等值线图之间的交叉过滤器。我最近对 dc.js 中的 reduce 方法有了更好的理解，所以我想将更多关于每个数据点的元数据传递给我的折线图和等值线图。这对于折线图非常有效，我现在有一个工具提示，显示了关于每个点的大量信息。

然而，对于我的等值线，使用 reduce 而不是 reduceSum 的过渡确实弄乱了我的数据。例如：

传递给工具提示的值不是我期望的数据，我也不知道计算是从哪里来的（它几乎看起来像是来自 SVG 路径，甚至是颜色访问器？）
当我在等值线的不同渲染之间切换时，我的等值线发生变化，但工具提示上的值保持完全相同
等值线的初始渲染显示的是一张全蓝色的地图，所以看起来初始值可能不正确，无论如何。

我正在尝试了解如何识别来自该组的数据点，使用它来根据特定值 (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 方法来选择正确的等值线组（基于某些应用程序状态），获取列表，然后我过滤以查看哪个项目与传递给工具提示的名称属性匹配。因为 filter returns 一个数组，我只是乐观地认为它会过滤到一个项目然后使用该项目。然后我可以访问完整的数据点，并可以相应地在工具提示中呈现它。不优雅，但它有效。

如何将多值数据传递到 dc.js 中的等值线

How to pass multivalue data to a choropleth in dc.js

javascript

data-visualization

d3.js

dc.js