javascript - 散点图更新 : same number of data points, 但有新数据点

Question

提前道歉，我的问题不包括代码，而是关于 D3 以及如何正确构建我的应用程序的高级问题。我会尽量使我的问题简洁明了:

我正在构建一个 React/D3 应用程序，用于创建 NBA 球队 Logo 的散点图，允许用户单击按钮为 X 轴和 Y 轴选择变量。用户还可以过滤图表以仅包含某些球队(NBA 特定部门的球队)。

这是应用程序的快速演示 gif，其中包含我遇到的主要问题:

.

...和 here是任何感兴趣的人到我的应用程序的链接。

什么工作正常

当我更改 X 或 Y 轴按钮(gif 的第二半部分)时，团队 Logo 会正确地滑动到它们的新位置。

什么地方工作不正常

当我更改分区时(gif 的前半部分)，它会更改显示的 5 个团队 Logo ，这是正确的。但是，动画(我在 gif 中显示了几次)不正确。旧 Logo 应该简单地消失在原地，新 Logo 应该简单地出现在原处。相反， Logo 会发生变化和滑动。

我明白为什么动画会这样——D3 在更新前看到 5 个数据点，在更新后看到 5 个数据点，但没有区分我的点是唯一的(不同的团队标志)。由于更新后的数据点具有新的 (x,y) 位置(每个团队的统计数据不同)，它只是将旧 Logo 动画化到新 Logo 的位置。

我建议的修复

我认为我的应用程序的结构在修复此问题方面阻碍了。目前，我有一个容器组件可以加载数据、过滤团队(基于所选部门)，然后将过滤后的数据(包含团队统计信息的对象数组)传递到创建 Logo 散点图的图形组件中。

另一方面，如果我将(所有 30 个团队的)完整对象传递给图形组件，那么我可以通过简单地让 D3 更改“填充”的方式来解决这个问题标记在被过滤掉后变为透明？这样，尽管有 25 个是不可见的，但始终绘制了 30 个 Logo ，并且显示的 Logo 应该正确设置动画。

提前感谢您的想法!

编辑:如果帖子有任何不清楚之处，请告诉我，我会尽力澄清。我尽量避免发布没有代码的问题，但这是一个相当高级别的问题，重点关注 D3 通用更新模式的工作原理，以及我如何构建具有在通用更新模式框架内工作的特定动画的图形。

Edit2:单选按钮在此处的容器组件 中构建。使用我的 API 从我的数据库中获取数据，然后使用这些单选按钮来过滤数据，这些都是在容器组件中完成的。我正在考虑将这些单选按钮带入图形组件并使用 D3 构建它们。我想我可能不得不这样做。

Edit3:早该分享，这里是制作这些标记的 D3 代码:

const update = svg.select('g.points')
    .selectAll("rect")
    .data(graphData);

// Second exit and remove
update.exit().remove();

// Third Update
update
    .enter()
    .append("rect")
        .attr("transform", d => `translate(${(xScale(+d[xColname]) - logoRadius)}, ${(yScale(+d[yColname]) - logoRadius)})`)
        .attr("x", 0).attr("y", 0)
        .attr("height", logoRadius)
        .attr("width", logoRadius)
        .attr("fill", d => `url(#teamlogo-${d.teamAbbrev})`)
        .attr("opacity", 0.95);

// And Fourth transition
update
    .transition()
    .duration(750)
    .delay((d, i) => i * 15)
        .attr("transform", d => `translate(${(xScale(+d[xColname]) - logoRadius)}, ${(yScale(+d[yColname]) - logoRadius)})`)
        .attr("x", 0).attr("y", 0)
        .attr("height", logoRadius)
        .attr("width", logoRadius)
        .attr("fill", d => `url(#teamlogo-${d.teamAbbrev})`)
        .attr("opacity", 0.95);

Answer 1

这里的问题似乎只是在数据连接期间缺少关键功能。

您在 comments section 中提问:

Doesn't the D3 general update pattern just look for the number of objects in the data array?

如果您设置了一个关键功能，答案是否。问题是……

If a key function is not specified, then the first datum in data is assigned to the first selected element, the second datum to the second selected element, and so on. A key function may be specified to control which datum is assigned to which element, replacing the default join-by-index, by computing a string identifier for each datum and element. (source)

因此，如果您不设置关键功能，因为您始终只有 5 个团队，所以当您更改部门时，您无法有效地进行进入和退出选择，而只是更新一个:因为您通过顺序绑定(bind)数据，D3认为芝加哥公牛队和亚特兰大老鹰队是同一支球队。

解决方案:设置一个按键函数。

使用团队缩写(假设它们唯一)可以很简单:

const update = svg.select('g.points')
    .selectAll("rect")
    .data(graphData, function(d){
        return d.teamAbbrv;
    });

---

PS:只是一个与您的问题无关的问题:为什么要在此处附加矩形？既然你有 logoRadius，添加圆圈不是更自然吗？最重要的是，数据表示会更准确，因为无论大小如何，圆心都位于正确的基准坐标处。矩形不是这种情况，其中坐标 (x, y) 表示其左上角。