javascript - How to do stroke-opacity:0 with d3 - Stack Overflow

admin管理员组

文章数量:1330666

Here is my code. My target - do intervals between slices in pie chart.

chart.svg.selectAll('path')
       .style('stroke-opacity','0.0')
       .style('stroke-width','10');

I think if stroke opacity will be 0 on piechart slices on web page it will be similar to interval between slices. Problem: if stroke opacity equals to zero that doesn't work. If equals to number from 0.1 to 1.0 - all works. But I have another color from background. Please give a hand to beginner! Thanks for attention and have a nice day.

Here is my code. My target - do intervals between slices in pie chart.

chart.svg.selectAll('path')
       .style('stroke-opacity','0.0')
       .style('stroke-width','10');

I think if stroke opacity will be 0 on piechart slices on web page it will be similar to interval between slices. Problem: if stroke opacity equals to zero that doesn't work. If equals to number from 0.1 to 1.0 - all works. But I have another color from background. Please give a hand to beginner! Thanks for attention and have a nice day.

• javascript
• css
• d3.js
• svg

Share Follow edited Jun 2, 2016 at 17:04 Sabutobi asked Jun 2, 2016 at 16:40 SabutobiSabutobi 34711 gold badge44 silver badges1919 bronze badges 5

• this is not detailed enough for me to assist – Johnathan Ralls Commented Jun 2, 2016 at 16:46
• 2 what does 'doesn't work' mean? – Robert Longson Commented Jun 2, 2016 at 16:49
• I think if stroke opacity will be 0 on piechart slices on web page it will be similar to interval between slices. – Sabutobi Commented Jun 2, 2016 at 17:04
• 2 Are you looking for something like Pie Padding? – altocumulus Commented Jun 2, 2016 at 17:14
• Yes.That is exactly what I'm looking for! Thanks. – Sabutobi Commented Jun 3, 2016 at 7:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I believe the problem es from the misconception that, when you set stroke-opacity to 0, the stroke will be transparent and reveal the background colour, and the fill of the element will end at the internal limits of the stroke. But, in fact, if you set the stroke-opacity to 0, you'll reveal the fill of the element (and the background colour, once the stroke goes inwards and outwards in the default stroke-alignment).

Look, for instance, at this example:

var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300);

var color = d3.scale.category10();

data = [10, 20];

var rects = svg.selectAll(".rect")
.data(data)
.enter()
.append("rect");

rects.attr("x", function(d){ return d*10})
.attr("y", 0)
.attr("width", 100)
.attr("height", 80)
.attr("fill", function(d){ return color(d)})
.attr("stroke-width", 10)
.attr("stroke", "white")
.attr("stroke-opacity", 0);

var rects2 = svg.selectAll(".rect2")
.data(data)
.enter()
.append("rect");

rects2.attr("x", function(d){ return d*10})
.attr("y", 100)
.attr("width", 100)
.attr("height", 80)
.attr("fill", function(d){ return color(d)})
.attr("stroke-width", 10)
.attr("stroke", "white");

<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.5.17/d3.min.js"></script>

Both the pairs of rectangles are absolutely equal:

rects.attr("x", function(d){ return d*10})
 .attr("y", 0)
 .attr("width", 100)
 .attr("height", 80)
 .attr("fill", function(d){ return color(d)})
 .attr("stroke-width", 10)
 .attr("stroke", "white")

The only difference is that, in the upper pair, I add:

.attr("stroke-opacity", 0);

And that is the same of having no stroke.

You can see that, independent of the stroke alignment, the area and the size of the element is the same. Check the default stroke:

The rect element, outlined by a black line, remains the same.

To finish, I just found this fiddle (I don't know who's the author), and I set the stroke to white and stroke-width to 10: this is what you want, imitating a real padding. But you'll not get this result setting the stroke opacity to 0: https://jsfiddle/j1769sx2/

本文标签： javascriptHow to do strokeopacity0 with d3Stack Overflow