【问题标题】:How to clear stacked chart without render如何在不渲染的情况下清除堆叠图表
【发布时间】:2017-11-26 16:55:40
【问题描述】:

我有barChart,堆栈很少:

chart
    .dimension(dim)
    .group(group1, element1)
    .groupBars(true)
    .stack(group2, element2)
    .stack(group3, element3)

稍后我向当前图表添加新维度和组:

chart
    .dimension(newDim)
    .group(newGroup1, newElement1)
    .groupBars(true)
    .stack(newGroup2, newElement2)

chart.redraw();

然后得到一些奇怪的东西:

看起来图表有来自先前堆栈的绿色条。如果我使用chart.render() 而不是chart.redraw() 一切正常,但redraw() 看起来好多了。我该如何解决这个问题?

更新:

我认为我需要从图表中删除旧维度和/或组,但我该怎么做?

【问题讨论】:

  • chart.select("dim").remove(); 做得更好吗?
  • @ISOmetric 我在第二次配置图表之前添加了这个并且有同样的问题
  • 那你还在那里做什么?我们可以看看你在配置之间做的其他事情吗?
  • @ISOmetric 你让我想到了一个想法,在第二次配置之前,我得到了新的crossfilter 对象并从中创建了新的维度。会不会是问题?
  • 可能 - 如果您将代码添加到您的问题中会更容易判断。

标签: javascript d3.js dc.js crossfilter


【解决方案1】:

这只是猜测,因为您没有提供代码。

正如我上面评论的那样,我认为这是您正在使用的分组条的实现中的一个错误。

但实际上,我认为这是 dc.js 核心中的一个错误:它不期望堆栈数量在没有渲染的情况下发生变化。我找到了对错误here 的引用。 (原来有很多东西只能用于渲染,不能重绘,我们正在慢慢修补。)

更换堆栈时试试这个:

for(var i = nstacks; i < 20; ++i) 
    chart.selectAll('g.stack._' + i + ' rect').remove()

其中nstacks 是新图表中的堆栈数。它将删除任何多余的堆栈,并且现有的堆栈应该仍然可以正常过渡。

【讨论】:

  • 谢谢,现在我在添加新配置之前使用chart.selectAll("g.stack").remove()
  • 当然,这将强制 dc.js 重新渲染条形图,因此您将丢失任何现有条形图上的过渡。如果您要替换所有数据,则转换可能无论如何都没有意义。
猜你喜欢
  • 1970-01-01
  • 2019-09-06
  • 2012-09-15
  • 1970-01-01
  • 2018-09-19
  • 2021-11-14
  • 2019-09-14
  • 1970-01-01
  • 2012-08-05
相关资源
最近更新 更多