在条形图中的条形悬停时更新饼图的最佳方法是什么 - d3答案

【问题标题】：what is the best way to update pie chart on hover of bars in a bar chart - d3在条形图中的条形悬停时更新饼图的最佳方法是什么 - d3
【发布时间】：2014-02-14 23:57:30
【问题描述】：

在post 的帮助下，我对 d3 中的鼠标悬停事件有了一定的灵活性。

而且我已经成功地展示了悬停在条形上的一些值。

现在，如果我正在创建一个 pie 图表，并且如果我想在悬停条形图的条形时更新该饼图。对我来说，将饼图数据包含到此 FIDDLE 中的现有数据中的最佳方法是什么？如何为饼图检索该数据？

我正在寻找类似this 的东西。

在上面的示例中，如果您将鼠标悬停在 rect 上。右下角的条形图已更新。

我找不到任何代码。但在page source 中找到了这个。

任何建议都可以帮助我实现这一目标。

提前致谢！！

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

你可以试试crossfilter之类的东西

http://square.github.io/crossfilter/

更新

这个想法是当您点击主图表（条形图）时更新饼图。

假设您的数据如下所示：

var ds = [
    { key: 'A', values: [1,2,3,4], sum: function () { return d3.sum(this.values); } },
    { key: 'B', values: [20, 30, 40], sum: function () { return d3.sum(this.values); } },
    { key: 'C', values: [100, 200, 300], sum: function () { return d3.sum(this.values); } }
];

你有一个创建/更新馅饼的功能，比如：

function updatePie(svg, data, radius) {
    var color = d3.scale.category20c();
    var arc = d3.svg.arc().outerRadius(radius);
    var formattedData = d3.layout.pie()(data);
    var slice = svg.selectAll('.slice')
        .data(formattedData);

    slice.enter()
        .append('path')
        .attr('fill', function(d, i) { return color(i); })
        .attr('class', 'slice')
        .attr('d', arc);

    slice
        .attr('d', arc);

    slice.exit()
        .remove();
}

现在在你的条形图的点击处理程序上

var clickHandler = function (dataPoint) {
    updatePie(svg, dataPoint.values, r);
};

这是一个仅使用主列表的工作示例（替换条形图），但想法是相同的：

http://jsfiddle.net/jaimedp/q45z6/1/

希望对你有帮助

【讨论】：

我什至可以使用this。但我只想使用d3。
非常感谢。我实际上知道如何更新pie 图表。但我唯一卡住的地方是数据格式。在看到您准备传递给饼图的数据后。我现在清楚地看到了它。是否有任何其他方式可以传递数据，例如 [1,2,3,4] 在 4 个不同的列中？
你能告诉我你在clickHandler函数中使用的ev是什么。
ev 将包含绑定到您单击的元素的数据点。 IE。如果您单击条形图的条形，您将获得该条形的数据...将名称更改为 dataPoint 以使其更清晰
除了您提供的链接之外，我还能找到任何用于交叉过滤器的文档链接吗？因为我对 crossfilter 不清楚。