如何用D3.js单次操作确保div仅在无svg子元素时创建它？

原生D3.js简洁写法 #

直接利用D3的selection.empty()方法判断SVG是否存在，结合链式调用减少重复选择：

const container = d3.select(div);
const svg = container.select("svg").empty() 
  ? container.append("svg") 
  : container.select("svg");

更高效的是用D3 v5及以上版本的join()方法，通过绑定单个数据项自动处理“复用或创建”逻辑，一行代码搞定：

const svg = d3.select(div).selectAll("svg").data([null]).join("svg");

data([null])绑定一个空数据项，join("svg")会自动匹配现有SVG元素（存在则保留），不存在就创建新的SVG，完全替代原有的三元判断逻辑。

ObservableHQ中的简化实现 #

在ObservableHQ环境下，除了上述D3方法，也可以借助内置DOM工具简化操作。不过最通用的还是join()写法，它能无缝适配Observable环境。另外也可以用dom.svg()快速创建元素并处理复用：

const existingSvg = d3.select(div).select("svg").node();
const svg = existingSvg || dom.svg().node();
if (!existingSvg) div.append(svg);

但还是推荐join()方法，代码更简洁统一。

内容的提问来源于stack exchange，提问作者citykid