[Solved]-D3 pie chart zero data point changes arc fill color-d3.js

1) You use an index for filling the segments:

.attr("fill", function(d, i) { return color(i); })

So, when during the update the length of your data is changed (itemValue=0 case) the filling colour for the appropriate arc also changes.

You should set the domain for your color scale:

const dataLabels = dataStructure[0].data
  .map(function(item) { return item.itemLabel; });

Save the array of labels to dataLabels variable

color.domain(dataLabels);

Pass it to .domain property. After that, you can get the associated colour by the label name:

paths.enter().append("svg:path")
  .attr("stroke", "white")
  .attr("stroke-width", 2)
  .attr("fill", function(d, i) { return color(d.name); }) // <--!!!
  .transition()
    .duration(tweenDuration)
    .attrTween("d", pieTween);

paths
  .attr("fill", function(d, i) { return color(d.name); }) // <--!!!
  .transition()
    .duration(tweenDuration)
    .attrTween("d", pieTween);

2) You should pass the index of the dataset that you want to show after the page loading to update function and to value property of the slider configuration object. You have the length of data equal to 21, so you should pass 10 or 11 for showing the slider position at the middle.

var middleDatasetIndex = Math.floor(dataStructure.length / 2); // = 11

$( "#slider" ).slider({
    value: middleDatasetIndex, // <-- !!!
    min: 0,
    max: 21,
    step: 1,
    slide: function( event, ui ) {
        update(ui.value);
        console.log(ui.value);
      }
})
...
update(middleDatasetIndex); // <--!!!

Check the working demo.