Question

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

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

传递给工具提示的值不是我期望的数据，而且我也不知道计算来自哪里（几乎似乎是来自SVG路径，甚至是颜色访问器？）
当我在不同的choropleth渲染之间切换时，我的choropleth会发生变化，但工具提示上的值保持完全相同
choropleth的初始渲染显示了一张全蓝色的地图，因此初始值似乎还是不正确。

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

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

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

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

如何将多值数据传递到dc.js中的整数倍

1 个答案: