Adding space Before and after the Svg:rect - d3.js

Question

I am appending a Extra svg:rect in to the bar chart when it meets certain condition. It works and the line appears. But It appears right next to the bar. So I need to have some space exactly before and after that extra Rect.

This code is not working. I have added padding-right. Also added the same functionality to the xLine class in a seperate css file. But still it is not working. What should I do here?

Here is the code of the Extra Rect I am appending

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 elements are placed absolutely, not automatically laid out with paddings and margins and such. You can either add a transform attribute where needed to move the parts that need moving, or you can adjust the rect position and size with the x, y, width, height attributes.

padding-right has no effect on elements in svg, and isn't even a valid attribute (which could potentially cause issues if svg was extended to have such an attribute, since your content would then change unexpectedly).

Answer 2

The easiest way to achieve this is to add the desired padding to the value that the scale returns, e.g.

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