直流条形图,在过滤器上,第一个已经渲染的条形图不会正确消失

时间:2017-01-16 15:45:00

标签: javascript d3.js dc.js crossfilter

我一直在搜索与dc.js相关的SO问题,但找不到这个问题的答案。 我的项目中有以下barChart。这是一个非常标准的定义。在下面的gif中你可以看到会发生什么: http://imgur.com/a/ggnm4

当我在另一个图表中过滤数据时,条形图正在移动并正确重新调整,但图表的第一个条形图仅在动画完成时消失。我不知道如何解决这个问题。

图表定义目前是:

chart
  .margins(this.margin)
  .width(this.width)
  .height(this.height)
  .group(fakeGroup)
  .dimension(dimension)
  .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal)
  .y(d3.scale.log().domain([minimum, this.getMax(yValue)])
    .range(this.height, 0)
    .nice()
    .clamp(true)
  )
  .xAxisLabel(this.xAxisLabel)
  .yAxisLabel(this.yAxisLabel)
  .elasticX(true)
  .title((d) => {return d.key + ': ' + d.value;})
  .ordinalColors(this.color)
  .on('renderlet', (chart) => {
    chart.selectAll('g.x text')
      .attr('dx', '-10')
      .attr('transform', 'rotate(-55)');
  })
  .on('filtered', (chart) => {
  });

chart.ordering((d) => -d.value);
chart.yAxis().ticks(15, ",d").tickSize(5, 10);

window.addEventListener("resize", () => {
  this.calculateSize();
  chart.width(this.width);
  chart.height(this.height);
  chart.transitionDuration(0);
  chart.rescale();
  chart.redraw();
  chart.transitionDuration(750);
});

0 个答案:

没有答案