Question

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

我设法显示了一些悬停在酒吧上的值。

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

我正在寻找类似this的内容。

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

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

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

提前致谢!!

Answer 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/

希望这有帮助

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

1 个答案:

更新