Question

当条件图符合某些条件时，我会在条形图中附加一个额外的svg：rect。它工作，线条出现。但它似乎就在酒吧旁边。所以我需要在额外的Rect之前和之后有一些空间。

此代码无效。我添加了padding-right。还在单独的css文件中向xLine类添加了相同的功能。但它仍然无法正常工作。我该怎么办？

以下是我追加的Extra Rect的代码

var xLine = d3.selectAll(svg).append('rect').data(series.stack.filter(function(d) {
                    return d.y !== null
                })).attr({
                    'width' : 0.4,
                    'height' : 400,
                    'fill' : '#09213a',
                    'padding-right' : '40',
                    'x' : function(d) {
                        return graph.x(a = a + brand_Count[j])
                        },
                    'y' : function(d) {
                        return graph.y(1300)
                    },
                    'class' : 'xLine'
                });

Answer 1

绝对放置SVG元素，而不是使用填充和边距等自动布局。您可以在需要移动需要移动的部件的位置添加transform属性，也可以使用x, y, width, height属性调整矩形位置和大小。

padding-right对svg中的元素没有影响，甚至不是有效属性（如果svg被扩展为具有这样的属性，则可能会导致问题，因为您的内容会随意更改）。 / p>

Answer 2

实现此目标的最简单方法是将所需的填充添加到比例返回的值，例如

var padding = 5;
// more code...
  'x' : function(d) {
    return graph.x(a = a + brand_Count[j]) + padding
  },

在Svg：rect - d3.js之前和之后添加空格

2 个答案: