score:2

Accepted answer

If you want to create a new element you need to append it, preferably in an "enter" selection:

var newSlices = svg.selectAll("a")
    .data(newData);

newSlices.enter()
    .append("a")
    .attr("href", "#")
    .append("path")

newSlices.attr("href", "#")
    .select("path")
    .each(function(d) {
        d.outerRadius = outerRadius - 20;
    })
    .attr("d", arc)
    .attr("fill", function(d, i) {
        return newColor(i);
    })
    .attr("title", function(d) {
        return d.value;
    });

Pay attention to the fact that the above snippet relies on the magic behaviour of the "enter" selection of D3 v2 and D3 v3, removed in D3 v4.x. In this new version, will have to set the attributes of the "enter" selection as well (or use a merge()).

Here is your working code with a button to call the update:

var width = 300,
  height = 300;

var dataDefault = [{
  "label": "",
  "value": 25
}, {
  "label": "",
  "value": 25
}, {
  "label": "",
  "value": 25
}, {
  "label": "",
  "value": 25
}];

var outerRadius = 100,
  innerRadius = outerRadius / 3,
  color = d3.scale.category10();

var pie = d3.layout.pie()
  .value(function(d) {
    return d.value;
  });

var pieData = pie(dataDefault);

var arc = d3.svg.arc()
  .innerRadius(innerRadius);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + outerRadius + "," + (outerRadius + 50) + ")");

svg.append("text")
  .attr("x", 0)
  .attr("y", -(outerRadius + 10))
  .style("text-anchor", "middle")
  .text("Distrubution of Default Usage");

svg.selectAll("a")
  .data(pieData)
  .enter()
  .append("a")
  .attr("href", function(d, i) {
    return "" + dataDefault[i].label + "Stats.cshtml";
  })
  .append("path")
  .each(function(d) {
    d.outerRadius = outerRadius - 20;
  })
  .attr("d", arc)
  .attr("fill", function(d, i) {
    return color(i);
  });

d3.select("button").on("click", function() {
  var dataBrowser = [{
    "label": "Edge",
    "value": 15
  }, {
    "label": "Chrome",
    "value": 65
  }, {
    "label": "Safari",
    "value": 30
  }, {
    "label": "Firefox",
    "value": 40
  }, {
    "label": "Other",
    "value": 40
  }];

  var newData = pie(dataBrowser);
  var newColor = d3.scale.category20();
  var newSlices = svg.selectAll("a")
    .data(newData);

  newSlices.enter()
    .append("a")
    .attr("href", "#")
    .append("path")

  newSlices.attr("href", "#")
    .select("path")
    .each(function(d) {
      d.outerRadius = outerRadius - 20;
    })
    .attr("d", arc)
    .attr("fill", function(d, i) {
      return newColor(i);
    })
    .attr("title", function(d) {
      return d.value;
    });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button>Click</button>
<br>


Related Query