NVD3-堆积的条形图，第二个条形之后的间隔

Question

bounty到期在5天内。该问题的答案有资格获得+ 50声望赏金。grimmus想要引起更多关注对此问题。

我想在堆叠条形图中的第二个条形之后插入100px的空格http://jsfiddle.net/dvm628e3/1/

所需的输出是

groupSpacing属性可帮助我为每个小节执行此操作，但并非为第n个小节执行此操作。

我已经尝试过选择组并应用变换，但是对于组和序列以及选择每个条形元素进行变换感到困惑。

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

感谢您的建议/协助

Answer 1

当前选择器的问题

您的CSS选择器很接近，但不太正确。

.nv-group:nth-child(2)表示其父级的第二个.nv-group。在your JSFiddle中，每个.nv-group是彩色条形段之一，在这种情况下，第二个.nv-group包含来自every条形的浅蓝色（中间）条形段（即，来自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结合的方法。