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'
                });

add unit px, em, or % and if its not library then use .css({width:..., height:....}) etc instead of attr() — Wasim A., Jul 02 '13 at 18:36

score 2 · Answer 1 · answered Jun 26 '13 at 10:54

2

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).

answered Jun 26 '13 at 10:54

Erik Dahlström

59,452
12
120
139

x, y, width, height is not helping to add the space in the axis.. also tried Transform-translate attribute. Same result. there is no other possible way to add a blank space in D3? Any suggestions? – Ash Jun 29 '13 at 17:07
@Ash: It looks like you want to _push_ the adjacent element to the right? If so, you will need to set a `transform` on the next element. Alternatively, if you want to _pull_ this `rect` to the left (?), then something like `.attr('transform', 'translate(-40,0')` should do the trick. – musically_ut Jun 30 '13 at 19:25

score 2 · Answer 2 · answered Jun 29 '13 at 18:59

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
  },

answered Jun 29 '13 at 18:59

Lars Kotthoff

107,425
16
204
204

X position shouldn`t change bro!! This method is changing the x position – Ash Jun 30 '13 at 07:22
You will have to change the position to achieve what you want. – Lars Kotthoff Jun 30 '13 at 12:28

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

2 Answers2