javascript - d3.js path d attribute -

i new d3 user. want create animation path created d3.arc().

my problem is, when mouseover event on g element triggered, path assigned javascript function instead of svg m path.

i think problem use of arctween() function when return arcs() in result.

            var outerdata = [   [{outerradius: 90, innerradius: 74, cornerradius: 5, startangle: 0, endangle: -5.34071}],   [{outerradius: 90, innerradius: 74, cornerradius: 5, startangle: 0, endangle: -1.5708}],   [{outerradius: 90, innerradius: 74, cornerradius: 5, startangle: 0, endangle: -3.76991}],   [{outerradius: 90, innerradius: 74, cornerradius: 5, startangle: 0, endangle: 2 * math.pi}], ];  function arcs(innerradius, outerradius, cornerradius, startangle, endangle) {   return d3.arc()       .innerradius(innerradius)       .outerradius(outerradius)       .cornerradius(cornerradius)       .startangle(startangle)       .endangle(endangle); }  var svg = d3.selectall('svg');  var path = svg.select('g')     .data(outerdata)     .each(function (d) {       d3.select(this)           .append('path')           .attr('d', arcs(               d[0].innerradius,               d[0].outerradius,               d[0].cornerradius,               d[0].startangle,               d[0].endangle))           .attr("transform", "translate(90, 90)")     })  svg.select('g').on('mouseover', function (d) {  d3.select(this).select('path')         .transition()         .duration(750) .attrtween("d", arctween(-4)) })  function arctween(newangle) {   return function (d) {      var interpolate = d3.interpolate(d[0].endangle, newangle);      return function (t) {        d[0].endangle = interpolate(t);        return arcs(           d[0].innerradius,           d[0].outerradius,           d[0].cornerradius,           d[0].startangle,           d[0].endangle);     };   }; } 

any ideas?

i solved problem. in function 'arcs'. instead of variant tried: var arc = d3.arc(), , return arc()