通过更改输入选择的数据，使用 d3 v3.js 在堆积条形图中进行过滤答案

【问题标题】：Filtering in stacked bar chart using d3 v3.js by changing data on input selection通过更改输入选择的数据，使用 d3 v3.js 在堆积条形图中进行过滤
【发布时间】：2016-12-10 07:20:25
【问题描述】：

我是 D3 的新手，并像 http://www.adeveloperdiary.com/d3-js/create-stacked-bar-chart-using-d3-js/ 一样创建了堆积条形图。

假设我像使用 CSV 一样

month,A,B
Jan,10,20
Feb,30,40

我需要添加过滤器，这样当输入为 A 时，只有数据为 A 的矩形应该是可见的。请帮助我了解如何实现它。我添加了一个带有 var input="A" 的特定方法，并添加了如下方法

 var dd=function(x)
{
   if(input==null)
   {
      return direction.map(function (c) {

    return data.map(function (d) {

        //console.log(d[c]);
             return {x: d.month, y: d[c]};
         })    
     })
     }

        else{
             return data.map(function (d) {
               return {x: d.month , y : d[input]};
           });
        }

}
var dataIntermediate=dd(input);
console.log(JSON.stringify(dataIntermediate));

这能够获取特定于每个输入的 x 和 y，但是，当我将其添加到时

var dataStackLayout = d3.layout.stack()(dataintermediate);

我知道 t.map 不是一个函数。当它特定于月份并且只有一组输入值时。此代码中存在缺陷

var dataStackLayout = d3.layout.stack()(dataIntermediate);

x.domain(dataStackLayout[0].map(function (d) {
    return d.x;
}));

y.domain([0,
    d3.max(dataStackLayout[dataStackLayout.length - 1],
            function (d) { return d.y0 + d.y;})
    ])
  .nice();

同时，所有数据一开始都是可见的，只有在选择之后，视觉需要过滤。我被困住了。请支持

【问题讨论】：

标签： javascript d3.js data-visualization

【解决方案1】：

只需要进行一项更改。

var dataStackLayout = d3.layout.stack()([dataIntermediate]);

这就是目的。就是这样。

【讨论】：