Question

我这里有一个傻瓜 - https://plnkr.co/edit/7Eg34HyhXY6M3UJccAFq?p=preview

它是一个简单的堆积条形图

我希望能够点击图例中的颜色并更新图表以仅显示该栏

我在网上发现了一些例子，但它们有点过于复杂 - 如果可能的话，只需要一个简单的方法

let legendItems = legend.selectAll('li')
    .data(legendKeys)
    .enter()
    .append('li');

legendItems.append('span')
    .attr('class', 'rect')
    .style('background-color', (d, i) =>{
        return colors[i];
    });

legendItems.append('span')
    .attr('class', 'label')
    .html((d) => {
        return d
    });

Answer 1

您应该以这种方式绑定click事件处理程序：

let legendItems = legend.selectAll('li')
    .data(legendKeys)
    .enter()
    .append('li')
    .on('click', handleLegendItemClick);

处理程序功能应如下所示（注意注释）：

function handleLegendItemClick(d, i) {
  // change opacity to show active legend item
  legendItems.filter(legendItem => legendItem !== d).style('opacity', 0.5);
  legendItems.filter(legendItem => legendItem === d).style('opacity', 1);

  // update domain of y scale and update tick on y axis
  y.domain([0, stackedSeries[i][0].data[d]]);
  yAxis.transition().call(d3.axisLeft(y));

  // bind new data
  let enter = rects.data([stackedSeries[i]])
    .enter()
    .append('rect');

  // remove old rects
  rects.exit();

  // draw new rect
  rects.merge(enter)
    .attr('height', (d) => {
      return height - y(d[0].data[d.key]);
    })
    .attr('y', (d) => {
      return 0;
    })
    .style('fill', (d, i) => {
      return colorScale(d);
    });
}

检查this fork of your plnkr。（我还添加色标 - colorScale用于按照图例键名称应用颜色，而不是像你那样按索引应用。）

const colorScale = d3.scaleOrdinal(colors);
colorScale.domain(legendKeys);

D3 - 更改堆叠条形图，点击图例

1 个答案: