更新D3.js树图的数据

Question

正如标题所说，我正在努力更新树图上的数据。我已经创建了其他几个不同复杂性的图表。

更具体地说：我的数据由多个测试用例组成；日期。我有一个日期范围的范围滑块，如果更改，图表应该会更新。它基本上显示一个用例在特定时间范围内的所有测试用例是否已经通过：

createCells () {
this.cell = this.group.selectAll('g')
.data(this.root.children)
.enter()
.append('g')
.attr('class', d => `node ${d.children ? 'node--internal' : 'node--leaf'}`)
.attr('transform', d => `translate(${d.x0}, ${d.y0})`)
this.cell.append('rect')
.attr('id', d => d.data.id)
.attr('width', d => d.x1 - d.x0)
.attr('height', d => d.y1 - d.y0)
.attr('fill', d => this.color(this.checkTests(d.data.values)))
}

update () {
this.treemap(this.root)
let rects = this.group.selectAll('rect')
.data(this.root.children)
.enter()
.append('g')
.attr('class', d => `node ${d.children ? 'node--internal' : 'node--leaf'}`)
.attr('transform', d => `translate(${d.x0}, ${d.y0})`)
rect.append('rect')
.attr('id', d => d.data.id)
.attr('width', d => d.x1 - d.x0)
.attr('height', d => d.y1 - d.y0)
.attr('fill', d => this.color(this.checkTests(d.data.values)))
.on('mouseover', this.tip.show)
.on('mouseout', this.tip.hide)
.on('click', d => this.showDetails(d))
.merge(temp)
.attr('fill', d => this.color(this.checkTests(d.data.values)))
rect.exit().remove()
}

现在的问题是，使用过滤后的数据，树图会重新定位其元素。虽然通常情况下这是想要的行为，但这不应该发生，因为我只对潜在的颜色变化(红色/绿色(感兴趣。我认为这是由于树图布局的层次结构。

提前谢谢！

：：编辑：：

Answer 1

对我来说，解决方案如下。

update () {
let rect = this.group.selectAll('g')
.data(this.root.children)
// EXIT and REMOVE
rect.exit().remove()
// ENTER
let nRect = rect.enter()
.append('g')
.attr('transform', d => `translate(${d.x0}, ${d.y0})`)
.attr('class', d => `node ${d.children ? 'node--internal' : 'node--leaf'}`)
nRect.append('rect')
.attr('id', d => d.data.id)
.attr('width', d => d.x1 - d.x0)
.attr('height', d => d.y1 - d.y0)
.attr('fill', d => this.color(this.checkTests(d.data.values)))
.on('mouseover', this.tip.show)
.on('mouseout', this.tip.hide)
.on('click', d => this.showDetails(d))
.merge(rect)
.attr('fill', d => this.color(this.checkTests(d.data.values)))
// UPDATE
rect.attr('transform', d => `translate(${d.x0}, ${d.y0})`)
rect.select('rect')
.attr('width', d => d.x1 - d.x0)
.attr('height', d => d.y1 - d.y0)
.attr('fill', d => this.color(this.checkTests(d.data.values)))
.on('mouseover', this.tip.show)
.on('mouseout', this.tip.hide)
.on('click', d => this.showDetails(d))
.merge(rect)
.attr('fill', d => this.color(this.checkTests(d.data.values)))
}

我做错的是没有正确应用exit/remove/enter/update。也许这也可以通过使用合并功能来实现？

这帮助了我，弄清楚出了什么问题：(