javascript - d3 图表未正确更新

Question

我正在创建堆积条形图。我使用 d3.stack 创建了一个数据对象，我将其绑定(bind)到“g”元素以处理正确的填充。然后我想访问数据结构的较低级别来绘制矩形。这第一次很好用，但出于某种原因，当我选择新数据时它没有更新。数据对象“stackedData”每次都在更新，但我不明白为什么它也没有更新“rect”。感谢您的帮助!

        invalid_svg.append('g')
        .attr('class', 'invalid-group')
        .selectAll('g')
        .data(stackedData)
        .join(
            enter=>{
                enter.append('g')
                    .attr('fill', d=>colorScale(d.key))
                    // .attr('transform', 'translate(45, 0)')
                    .transition()
                        .duration(this.transition_time)
            },
            update=>{
                update
                .transition()
                    .duration(this.transition_time)
                .attr('fill', d=>colorScale(d.key))
            },
            exit=>{exit.transition()
                    .duration(this.transition_time)
                .remove()
            }
        )
        d3.select('.invalid-group').selectAll('g')
            .selectAll('rect')
            .data(d=> d)
            .join(
                enter=>{
                    enter.append('rect')
                        .attr('x', d=>scaleX(d.data.database))
                        .attr('y', d=>scaleY(d[1] || 0))
                        .attr('height', d=>{
                            console.log(d)
                            return scaleY(d[0]) - scaleY(d[1]) || 0; })
                        .attr('width', scaleX.bandwidth())
                        .transition()
                            .duration(this.transition_time)
                },
                update=>{
                    update.transition()
                            .duration(this.transition_time)
                        .attr('x', d=>{
                            console.log(d)
                            return scaleX(d.data.database)})
                        .attr('y', d=>scaleY(d[1] ? d[1]: 0))
                        .attr('height', d=>{return scaleY(d[0]) - scaleY(d[1]) || 0; })
                        .attr('width', scaleX.bandwidth())
                },
                exit=>{
                    exit.remove()
                }

Answer 1

让我们分解一下您的代码:

1.附加一个新的g类invalid-group:

   invalid_svg.append('g')
      .attr('class', 'invalid-group')

2.执行与新数据数组的连接以输入新的子 g 元素:

   .selectAll('g')
    .data(stackedData)
    .join(...

3.选择类为invalid-group的first元素并选择每个子元素g:

  d3.select('.invalid-group').selectAll('g')

4. 对 first 元素的每个子 g 类 invalid-group 的绑定(bind)数据执行数据连接:

 .selectAll('rect')
        .data(d=> d)
        .join(

因为第 1 步每次迭代都会附加一个新的 g，所以第 2 步只会输入元素:新附加的 g 中没有要更新的子元素。新数据只会附加到这些新的 g 元素。

在除第一次之外的每次迭代中，第 3 步忽略这些新加入/输入的子 g 元素，因为它只选择那些在第一次迭代中附加的元素 (d3.select('.invalid -group') 返回第一个匹配的元素——也就是第一次迭代后追加的 g)，最后第 4 步重新绑定(bind)原来绑定(bind)到子组的数据g 在第一次迭代的第一步中附加。此数据永远不会更新，因此矩形永远不会获得新的绑定(bind)数据。

假设此代码在更新函数中，请在第一步中删除 invalid_svg.append('g') 并在更新函数之外执行此附加操作。要么重新选择它以在步骤 2 中进行连接，要么使用变量来保存它。