D3.js “有没有捷径？”；创建或修改"；d3轴（具有修改数据/尺寸的过渡）？

我的D3可视化在数据更改或调整窗口大小时会发生转换。x轴和y轴也进行转换，但我总是有一些代码没有典型的短D3样式：

示例（第一个代码块并不重要，仅在理解时可见）：

现在，这是我要优化的代码：

var xAxisSvg = group.select('.x.axis');
if (xAxisSvg.empty()) {
    group.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);
} else {
    xAxisSvg.transition()
        .duration(duration)
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);
}

---

是否有类似于

enter（）

的方法来创建轴svg并应用新的逻辑轴？如何优化此重复代码？

只需执行运行所需的最低限度操作，即可大大缩短代码：

var xAxisSvg = group.select('.x.axis');
if (xAxisSvg.empty()) {
  xAxisSvg = group.append('g')
    .attr('class', 'x axis');
}
xAxisSvg.transition()
    .duration(duration)
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);

可选地，您可以将一些虚拟数据绑定到它，并使用输入/更新模式，尽管在这种情况下，我不认为是特别好的设计。

var xAxisSvg = group.selectAll('.x.axis').data([0]);
xAxisSvg.enter()
    .append('g')
    .attr('class', 'x axis');
xAxisSvg.transition()
    .duration(duration)
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);

---

第一种选择有效。我也想到了第二个，但它需要一个注释，以便其他开发人员理解。谢谢

var xAxisSvg = group.selectAll('.x.axis').data([0]);
xAxisSvg.enter()
    .append('g')
    .attr('class', 'x axis');
xAxisSvg.transition()
    .duration(duration)
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);