【问题标题】：NVD3 - Stacked Bar chart, space after every second barNVD3 - 堆积条形图，每隔一个条形后有空格
【发布时间】：2020-07-03 23:26:42
【问题描述】：

我想在堆叠条形图中每隔一个条形插入 100px 的空间 http://jsfiddle.net/dvm628e3/1/

想要的输出是

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

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

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

感谢您的建议/帮助

【问题讨论】：

标签： javascript d3.js svg nvd3.js

【解决方案1】：

当前选择器的问题

您的 CSS 选择器很接近，但并不完全正确。

.nv-group:nth-child(2) 表示其父级的第二个.nv-group。在your JSFiddle 中，每个.nv-group 都是彩色条形段之一，在这种情况下，第二个.nv-group 包含每个条形的浅蓝色（中间）条形段（即中间条形JJ，BB，...）。

相反，我们需要从每个.nv-group 中选择正确的栏。

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

这会选择第二个栏。

更好的是，我们可以做到

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

这会选择每隔一个小节。

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

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

可能的解决方案

1。以编程方式移动条形图JSFiddle

你可以这样做：

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})`)
  }
}

上面的代码工作并成功移动每第二个柱。

但是，如果您尝试每 3 条或更多条创建一个空间，图表会看起来很奇怪，因为间距会不一致。

2。使用数据中的空间JSFiddle

var data = [
    {
        "key": "one", 
        "values": [
            {"x": "JJ", "y": 0.8},
            {"x": "BB", "y": 0.8},
            {"x": "", "y": 0},      //<-- here
            {"x": "DD", "y": 0.7},
            {"x": "FF", "y": 0.6},
            {"x": " ", "y": 0},     //<-- here
            {"x": "HH", "y": 0.5}
        ]
    },

这会添加一个不可见的条。问题是它是常规厚度。您必须使用解决方案 1 来调整宽度。

3。不要使用 NVD3

“Vanilla”D3 拥有出色的example on how to separate bars into groups。

不过，我找不到将它与 NVD3 结合的方法。

【讨论】：