Javascript NVD3-堆叠条形图，每秒钟条形图后的空间

我想在堆叠条形图中的每一个条形后插入100px的空间

所需输出为

groupSpacing属性帮助我对每个条执行此操作，但不是对每个第n条执行此操作

我曾尝试选择组并应用变换，但对组和系列感到困惑，并且选择每个条的元素以正确应用变换

d3.selectAll(".nv-group:nth-child(2)").attr("transform", "translate(35, 0)");

感谢您的建议/帮助

当前选择器存在问题 您的CSS选择器很接近，但不完全正确

.nv组：第n个子组（2）

表示其父组的第二个

.nv组。在中，每个
.nv组
都是彩色条段之一，在这种情况下，第二个
.nv组
包含每个条段的浅蓝色（中间）条段（即JJ、BB等的中间条段）

相反，我们需要从每个
.nv组
中选择正确的条

d3.selectAll(".nv-group rect:nth-child(2)")

这将选择第二个栏

更好的是，我们能做到

d3.selectAll(".nv-group rect:nth-last-child(2)")

这将每秒选择一个条

然后我们可以在这些选定的对象上应用
.width
或
.attr
，但实际上没有多大帮助

因为每个条形图都是相对于图表的左侧放置的，而不是相对于它前面的条形图，通过移动单个条形图，我们会在周围的条形图之间创建奇怪的间隙

可能的解决方案
1.以编程方式移动条
您可以这样做：

for ( let i = 1; i <= d3.selectAll(".nv-group:first-child rect")[0].length; i++) {
  if (i % 2 == 0) {
    const [xPosition, yPosition] = d3.selectAll(`.nv-group rect:nth-child(${i})`).attr("transform").match(/[0-9.]+/g);
    d3.selectAll(`.nv-group rect:nth-child(${i})`).attr("transform", `translate(${xPosition - 5}, ${yPosition})`)
  }
}

for（设i=1；i当前选择器有问题
您的CSS选择器很接近，但不完全正确

.nv group:n子（2）
表示其父级的第二个
.nv group
。在中，每个
.nv group
都是彩色条段之一，在这种情况下，第二个
.nv group
包含每个条段的浅蓝色（中间）条段（即JJ、BB等的中间条）

相反，我们需要从每个
.nv组
中选择正确的条

d3.selectAll(".nv-group rect:nth-child(2)")

这将选择第二个栏

更好的是，我们能做到

d3.selectAll(".nv-group rect:nth-last-child(2)")

这将每秒选择一个条

然后我们可以在这些选定的对象上应用
.width
或
.attr
，但实际上没有多大帮助

因为每个条形图都是相对于图表的左侧放置的，而不是相对于它前面的条形图，通过移动单个条形图，我们会在周围的条形图之间创建奇怪的间隙

可能的解决方案
1.以编程方式移动条形图
您可以这样做：

for ( let i = 1; i <= d3.selectAll(".nv-group:first-child rect")[0].length; i++) {
  if (i % 2 == 0) {
    const [xPosition, yPosition] = d3.selectAll(`.nv-group rect:nth-child(${i})`).attr("transform").match(/[0-9.]+/g);
    d3.selectAll(`.nv-group rect:nth-child(${i})`).attr("transform", `translate(${xPosition - 5}, ${yPosition})`)
  }
}

for（设i=1；i