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

Question

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

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

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

我试图了解如何识别来自该组的数据点，使用它来根据特定值 (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

由于数据与等值线的绑定(bind)，我现在使用通过的数据(具体来说，是选择的美国州)，然后识别交叉过滤器组中的数据点:

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

所以我有一个 returnGroup 方法来选择正确的等值线组(基于某些应用程序状态)，获取列表，然后我过滤以查看哪个项目与传递给工具提示的名称属性相匹配。因为 filter 返回一个数组，我只是乐观地认为它会过滤到一个项目然后使用该项目。然后我可以访问完整的数据点，并可以相应地在工具提示中呈现它。不优雅，但它有效。