我已经在一个简单的视觉上将d3从v3升级到v5。我已经做了大部分的调整，包括d3.scv.arc和d3.layout.pie，但我得到以下错误消息：
“无法读取null的属性（阅读'transition'）”
下面是v3的代码：https://jsfiddle.net/bentham7246/b06wLcm8/141/以下是到目前为止包含错误的v5代码：https://jsfiddle.net/bentham7246/hmnyu7bs/1/的
有人能帮忙吗？
这是当前的v5代码

// set the dimensions and margins of the graph
var margin = {
    top: 50,
    right: 30,  
    bottom: 10,
    left: 50
  },
  width = 900 - margin.left - margin.right,
  height = 150 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");
var outerRadius = 45;
var innerRadius = outerRadius - 5;
var color = ['#ec1561', '#2a3a46', '#ec1561'];
var data = [
  {
    "value": 90,
    "variance": 6
  }
]
var percent = d3.max(data, function(d) {
    return d.value
  })
var pie = d3.pie()
  .value(function(d) {
    return d
  })
  .sort(null);
var arc = d3.arc()
  .innerRadius(30)
  .outerRadius(35)
  .startAngle(0)
  .endAngle(2 * Math.PI);
var arc2 = d3.arc()
  .innerRadius(30)
  .outerRadius(35)
  .startAngle(0)
  .endAngle(2 * Math.PI);
//The circle is following this
var arcDummy = d3.arc()
  .innerRadius((outerRadius - innerRadius) / 2 + innerRadius)
  .outerRadius((outerRadius - innerRadius) / 2 + innerRadius)
  .startAngle(0);
var arcLine = d3.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius)
 // .cornerRadius(10)
  .startAngle(0);
//background
var path = svg.append('path')
  .attr({
    d: arc,
    fill: color[1],
    opacity: 0.2
  });
var path2 = svg.append('path')
  .attr({
    d: arc2,
    fill: color[1],
    opacity: 0.2
  });
var pathForeground = svg.append('path')
  .datum({
    endAngle: 0
  })
  .attr({
    d: arcLine,
    fill: "#137A76"
  });
//Dummy Arc for Circle
var pathDummy = svg.append('path')
  .datum({
    endAngle: 0
  })
  .attr({
    d: arcDummy,
    fill: color[0]
  });
var endCircle = svg.append('circle')
  .attr({
    r: 0,
    transform: 'translate(0,' + (-outerRadius + 7) + ')',
    stroke: color[0],
    'stroke-width': 5,
    fill: color[2]
  });
var middleTextCount = svg.append('text')
  .datum(0)
  .text(function(d) {
    return d + '%';
  })
  .attr({
    class: 'middleText',
    'text-anchor': 'middle',
    dy: 0,
    dx: 75,
    fill: '#ec1561',
    'font-size': '20px'
  });
  
  
  svg
  .data(data)
  .append("svg:image")
  .attr("y", 20)
  .attr("x", 50)
  .attr("width", 8)
  .attr("xlink:href", function(d) {
    if (d.variance < 0 ) {
      return "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2048px-Red_Arrow_Down.svg.png"
    } else {
      return "https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Green_Arrow_Up.svg/1200px-Green_Arrow_Up.svg.png"
    }
  })
  
  
    svg 
  .append("svg:image")
  .attr("y", -25)
  .attr("x", -25)
  .attr("width", 50)
  .attr("xlink:href", function(d) {
   
      return "https://cdn-icons-png.flaticon.com/512/2879/2879567.png"
  })
  
      //add icon
  
  
  
  svg 
  .append("text")
  .attr("class", "title")
  .attr("y", 15)
  .attr("x", 50)
  .text("Positive Feedback")
  
  
    svg 
  .data(data)
  .append("text")
  .attr("class", "varweek")
  .attr("y", 27)
  .attr("x", 62)
  .text(function(d) {
    return d.variance + '% vs last week';
  })
var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
  .attr("id", "gradient")
  .attr("x1", "0%")
  .attr("y1", "0%")
  .attr("x2", "0%")
  .attr("y2", "100%")
  .attr("spreadMethod", "pad");
gradient.append("svg:stop")
  .attr("offset", "0%")
  .attr("stop-color", "#DA0D91")
  .attr("stop-opacity", 0.05);
gradient.append("svg:stop")
  .attr("offset", "100%")
  .attr("stop-color", "#DA0D91")
  .attr("stop-opacity", 1);
var arcTweenOld = function(transition, percent, oldValue) {
  transition.attrTween("d", function(d) {
    var newAngle = (percent / 100) * (2 * Math.PI);
    var interpolate = d3.interpolate(d.endAngle, newAngle);
    var interpolateCount = d3.interpolate(oldValue, percent);
    return function(t) {
      d.endAngle = interpolate(t);
      var pathForegroundCircle = arcLine(d);
      middleTextCount.text(Math.floor(interpolateCount(t)) + '%');
      var pathDummyCircle = arcDummy(d);
      var coordinate = pathDummyCircle.split("L")[1].split("A")[0];
      endCircle.attr('transform', 'translate(' + coordinate + ')');
      return pathForegroundCircle;
    };
  });
};
var oldValue = 0;
var animate = function() {
  pathForeground.transition()
    .duration(750)
    .ease('cubic')
    .call(arcTweenOld, percent, oldValue);
  oldValue = percent;
  //percent=(Math.random() * 60) + 20;
  // setTimeout(animate,3000);
};
setTimeout(animate, 0);

@import url('https://fonts.googleapis.com/css2?family=Georama:ital@1&display=swap');
body {
    background-color: #1B1F2A;
    width: 100%;
    font-family: 'Georama', sans-serif;
    height: 100%;
}
.widget {
    margin: 0 auto;
    width:350px;
    margin-top:50px;
    background-color: #222D3A;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 0px #06060d;
}
.header{
    background-color: #29384D;
    height:40px;
    color:#929DAF;
    text-align: center;
    line-height: 40px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 400;
    font-size: 1.5em;
    text-shadow: 1px 1px #06060d;
}
.chart-container{
    padding:25px;
}
.shadow {
    -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.1) );
    filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.1) );
}
.title {
  font-family: 'Georama', sans-serif;
  fill: white;
  font-size: 11px;
}
.varweek
{
  fill: white;
  font-size: 9px;
  opacity: 0.25
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="chart" class="chart-container">
    </div>