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

【问题标题】：How to pass multivalue data to a choropleth in dc.js如何将多值数据传递给 dc.js 中的等值线
【发布时间】：2018-11-02 16:09:50
【问题描述】：

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

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

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

我试图了解如何识别来自该组的数据点，使用它根据特定值 (total_sampled_sales) 呈现 choropleth，然后将该数据传递给工具提示，以便每个状态的值和可以显示元数据。

此外，对于调试此类问题的任何提示，我们将不胜感激。正如您可能从我的 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/

请注意，数据有点不稳定，因为我删除了一半的记录只是为了限制大小

【问题讨论】：

你没有想象到，“错误”的数据是必然的：github.com/dc-js/dc.js/issues/1268如果有人找到解决方法，希望能抽出时间来挖掘。如果没有，你最好的选择可能是将您自己的映射键映射到您想要使用的任何数据（或者只是线性搜索group.all() 以获取您需要的数据，这对于工具提示来说不应该是一个性能问题）。是的，这很烦人。
哇，很高兴知道我没疯。可能会设置该地图，但我可能只会进行线性搜索（它只有 50 条记录，因为它是美国各州，所以真的不应该成为问题。）
找不到之前的讨论，除非我记得an unanswered question from 2014 :-p 线性搜索应该没问题，只是不方便。我确信这张图表可以设计得更好，但也许我缺少一些东西。

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

【解决方案1】：

由于数据与 choropleths 绑定，我现在使用通过的数据（特别是选择的美国州），然后识别交叉过滤器组中的数据点：

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

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

【讨论】：