在 Svg:rect - d3.js 前后添加空格答案

【问题标题】：Adding space Before and after the Svg:rect - d3.js在 Svg:rect - d3.js 前后添加空格
【发布时间】：2013-06-26 06:29:29
【问题描述】：

当满足特定条件时，我将额外的 svg:rect 添加到条形图中。它起作用了，并且出现了线条。但它出现在酒吧旁边。所以我需要在那个额外的矩形之前和之后有一些空间。

此代码不起作用。我添加了填充权。还在单独的 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'
                });

【问题讨论】：

添加单位 px、em 或 %，如果不是库，则使用 .css({width:..., height:....}) 等代替 attr()

标签： jquery graph svg d3.js rickshaw

【解决方案1】：

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

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

【讨论】：

x, y, width, height 无助于在轴上添加空间.. 还尝试了 Transform-translate 属性。结果相同。没有其他可能的方法可以在 D3 中添加空格吗？有什么建议吗？
@Ash：看起来你想把相邻的元素推到右边？如果是这样，您将需要在下一个元素上设置 transform。或者，如果你想拉这个rect到左边（？），那么像.attr('transform', 'translate(-40,0')这样的东西应该可以解决问题。

【解决方案2】：

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

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

【讨论】：

X 位置不应该改变兄弟！此方法正在改变 x 位置
你必须改变位置才能达到你想要的效果。