javascript - D3 - v5 多个文本元素的更新模式

Question

在下面的代码中，我尝试为每小时购买的市场创建可视化。我尝试遵循 v5s 更新模式，但它不允许我加入两个不同的文本 <text>元素。最后添加的连接会覆盖第一个连接，因此 8

我环顾四周，但找不到与两个相同元素的更新模式相关的任何内容。

https://jsfiddle.net/itsahoax/gd2uew73/7/

                const updateCircles = () => {
                    const circles = d3.select('svg')
                        .selectAll('circle');
                    circles
                        .data(dataPoints)
                        .join('circle')
                        .attr('cx', xPosition)
                        .attr('cy', canvasHeight)
                        .attr('r', circleRadius)
                        .attr('id', (d) => d.uniqueid)
                        .attr('fill', (d) => d.color);

                    const text = d3.select('svg')
                        .selectAll('text')
                        .data(dataPoints);

                    text
                        .join()
                        .attr('x', xPosition)
                        .attr('y', canvasHeight)
                        .attr('id', (d) => d.uniqueid)
                        .text((d) => d.description);

                    text
                        .join()
                        .attr('x', xPosition)
                        .attr('y', canvasHeight + 15)
                        .attr('id', (d) => d.uniqueid)
                        .text((d) => `${d.value} KwH`);

                };
                if (update === true) {
                    updateCircles();
                } else {
                    const circles = selection.selectAll('circle')
                        .data(dataPoints, (d) => d.id);

                    const text = selection.selectAll('text')
                        .data(dataPoints);

                    circles
                        .enter().append('circle')
                        .attr('cx', xPosition)
                        .attr('cy', canvasHeight)
                        .attr('r', circleRadius)
                        .attr('id', (d) => d.uniqueid)
                        .attr('fill', (d) => d.color)
                        .merge(circles);

                    text
                        .enter().append('text')
                        .attr('x', xPosition)
                        .attr('y', canvasHeight)
                        .attr('id', (d) => d.uniqueid)
                        .merge(text)
                        .text((d) => d.description);

                    text
                        .enter().append('text')
                        .attr('x', xPosition)
                        .attr('y', canvasHeight + 15)
                        .attr('id', (d) => d.uniqueid)
                        .merge(text)
                        .text((d) => `${d.value} KwH`);
                }
            };

Answer 1

如果您有多个具有不同内容且具有相同选择器的元素(例如 <text> )，请勿使用元素选择器。添加它们类并使用 .selectAll('.className')有一个使用 Selection.join JSFiddle 的工作示例.

有关选择的更多信息。加入 here .

// render code
        const circles = (selection, dataPoints, isUpdate) => {
            const xPosition = (d, i) => +i * 180 + 100;

            const updateCircles = (data) => {
                const circles = d3.select('svg').selectAll('.circle-area').data(data);

                circles
                  .join((enter) => {
                    enter
                      .append('circle')
                      .attr('class', 'circle-area')
                      .attr('cx', xPosition)
                      .attr('cy', canvasHeight)
                      .attr('r', circleRadius)
                      .attr('id', (d) => d.uniqueid)
                      .attr('fill', (d) => d.color);
                    }, (update) => {
                       update.attr('fill', (d) => d.color);
                    }, (exit) => {
                       exit.remove();
                    });

                const descriptionText = d3.select('svg').selectAll('.kwh-description').data(data);

                descriptionText
                    .join((enter) => {
                      enter
                        .append('text')
                        .attr('class', 'kwh-description')
                        .attr('x', xPosition)
                        .attr('y', canvasHeight)
                        .attr('id', (d) => `description-${d.uniqueid}`)
                        .text((d) => d.description);

                    }, (update) => {
                      update.text((d) => d.description);
                    }, (exit) => {
                      exit.remove();
                    });


                const valueText = d3.select('svg').selectAll('.kwh-value').data(data);

                valueText
                    .join((enter) => {
                      enter
                        .append('text')
                        .attr('class', 'kwh-value')
                        .attr('x', xPosition)
                        .attr('y', canvasHeight + 15)
                        .attr('id', (d) => `value-${d.uniqueid}`)
                        .text((d) => `${d.value} KwH`);

                    }, (update) => {
                      update.text((d) => `${d.value} KwH`);
                    }, (exit) => {
                      exit.remove();
                    });


            };

            if (isUpdate) {
                console.log(dataPoints)
                updateCircles(dataPoints);
            }

        };