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)))
    }

我做错的是没有正确应用退出/删除/输入/更新。也许这也可以通过使用合并功能来实现？

This帮助了我，弄清楚出了什么问题：）

更新D3.js树图的数据

1 个答案: