Remove Stroke Border from SVG within HTML/CSS/JS Web App

Question

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.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="d3pie.min.js"></script>

Result:

Answer 1

svg:focus {
    outline:none;
}
path:focus {
        outline:none;
}

Answer 2

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>

Answer 3

svg.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,

Answer 4

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