0

I am trying to implement a stacked barchart, where one of the bar data sets has a semitransparent color and an opaque stroke. However, the stroke should be positioned inside and not outside of the bar, which is default behavior. I am not aware of any possible attribute or style setting with which this could be achieved?

I am defining the stroke with 

.attr("stroke", function(d) { return zStroke(d.key); })
.attr("stroke-width", (function(d) { return zStrokeWidth(d.key) + "px"; }))

where zStroke and zStrokeWidth return the color and width of the bar data series.

medonja
  • 308
  • 3
  • 15
  • 1
    Not possible: http://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn . Just wait for SVG 2.0, to be released in 2047. – Gerardo Furtado Jan 23 '17 at 11:15
  • In that case, would it be possible to shrink the width of only the series which I need to have an outline for exactly the few pixels the stroke is occupying? – medonja Jan 23 '17 at 11:18
  • 1
    Have a look at the answer I shared, it has some alternatives. – Gerardo Furtado Jan 23 '17 at 11:21

1 Answers1

0

Just change the width - and height, because with SVG, borders are on all sides, or none - of the bar series on which you want to apply a border. E.g. 

.attr("width", function(d) { return d.withBorder ? 20 : 24; })
.attr("height", function(d) { return d.height + d.withBorder ? 0 : 4; })
Robert Monfera
  • 1,980
  • 1
  • 22
  • 16
  • I thought of doing something similar and tried out your example, but in my case when I pass the function instead of the x.bandwidth() return value, the d parameter is just an array of two elements. What is d supposed to be in your case? – medonja Jan 23 '17 at 12:16
  • I don't see what data you're feeding in, so perhaps a two-element array could represent position and height, or something like this. In this case, you'd better `map` over the data before calling these `attr` methods, and put each array into an object, and that object should also have properties e.g. `withBorder` for my example to work. If the array of two elements represents the two stacked values, then the data would need to be split first, or you could use `selection.filter` but it's hard to tell what you have without seeing your code and data. Btw. how did d.key even work if d is an array? – Robert Monfera Jan 26 '17 at 11:53