I've been trying to remove the stroke from a d3pie and have had no luck, there isnt any tutorial on it and even in the generator there isnt an option to remove the stroke, just change its color, im wondering if its even possible to get rid of the stroke. This is the code that i have so far for the doughnut chart. Any help would be greatly appreciated. Thanks
var pie = new d3pie("pieChart", {
"header": {
"title": {
"fontSize": 24,
"font": "open sans"
},
"subtitle": {
"color": "#999999",
"fontSize": 12,
"font": "open sans"
},
"location": "top-left",
"titleSubtitlePadding": 9
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasHeight": 400,
"canvasWidth": 400,
"pieInnerRadius": "68%",
"pieOuterRadius": "100%"
},
"data": {
"sortOrder": "label-desc",
"content": [
{
"label": "Natty",
"value": 1,
"color": "#fb0000"
},
{
"label": "Nah",
"value": 1,
"color": "#000000"
}
]
},
"labels": {
"outer": {
"format": "none",
"pieDistance": 32
},
"inner": {
"format": "none",
"hideWhenLessThanPercentage": 3
}
},
"tooltips": {
"enabled": true,
"type": "placeholder",
"string": "{label}: {value}, {percentage}%",
"styles": {
"padding": 10
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
}
});
<div id="pieChart"></div>
<script src=".4.4/d3.min.js"></script>
<script src="d3pie.min.js"></script>
Result:
I've been trying to remove the stroke from a d3pie and have had no luck, there isnt any tutorial on it and even in the generator there isnt an option to remove the stroke, just change its color, im wondering if its even possible to get rid of the stroke. This is the code that i have so far for the doughnut chart. Any help would be greatly appreciated. Thanks
var pie = new d3pie("pieChart", {
"header": {
"title": {
"fontSize": 24,
"font": "open sans"
},
"subtitle": {
"color": "#999999",
"fontSize": 12,
"font": "open sans"
},
"location": "top-left",
"titleSubtitlePadding": 9
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasHeight": 400,
"canvasWidth": 400,
"pieInnerRadius": "68%",
"pieOuterRadius": "100%"
},
"data": {
"sortOrder": "label-desc",
"content": [
{
"label": "Natty",
"value": 1,
"color": "#fb0000"
},
{
"label": "Nah",
"value": 1,
"color": "#000000"
}
]
},
"labels": {
"outer": {
"format": "none",
"pieDistance": 32
},
"inner": {
"format": "none",
"hideWhenLessThanPercentage": 3
}
},
"tooltips": {
"enabled": true,
"type": "placeholder",
"string": "{label}: {value}, {percentage}%",
"styles": {
"padding": 10
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
}
});
<div id="pieChart"></div>
<script src="http://cdnjs.cloudflare./ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="d3pie.min.js"></script>
Result:
Share Improve this question edited Nov 24, 2021 at 21:46 HoldOffHunger 20.9k11 gold badges120 silver badges146 bronze badges asked Dec 21, 2014 at 3:49 user3822484user3822484 31 gold badge1 silver badge6 bronze badges 1- If you can't find the answer in the library's help pages, you could file an issue on github asking the author to implement that option. Alternately, you could modify the library code yourself, or re-select the paths after they have been drawn and reset the style property. – AmeliaBR Commented Dec 21, 2014 at 4:23
4 Answers
Reset to default 4svg.selectAll('rect')
.on("mouseover", function(d) {
var e = d3.select(this)
e.attr('stroke', '#2378ae')
e.attr('stroke-width', '3');
})
.on("mouseout", function(d){
d3.selectAll('rect').attr("stroke", "none");
});
this will togle your rect bar i dont know in that pie, hope this will give you idea, d3 have function to play with css use that,
You should be able to remove the stroke via CSS. That's why there isn't an option for it directly. Just open up the dev tools in your browser, select the arc element to figure out the appropriate classname and then set stroke: none (or whatever you want).
100% CSS-Only Solution
This can be done 100% entirely in CSS. Because the stroke can be defined in many ways, not all of which can be controllable with stroke:none, you can use instead: stroke-opacity: 0, which will make the stroke invisible.
#hover-box:hover {
stroke-opacity: 0;
}
Source
From MDN Web Docs - stroke-opacity...
The stroke-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to the stroke of a shape.
Note: As a presentation attribute stroke-opacity can be used as a CSS property.
Working Demo
Normal Strokes...
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
Sorry, your browser does not support inline SVG.
</svg>The same exact code as normal strokes, but with stroke-opacity:0;...
<svg height="80" width="300" style="stroke-opacity:0;">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
Sorry, your browser does not support inline SVG.
</svg>svg:focus {
outline:none;
}
path:focus {
outline:none;
}