D3.js when i clicked(donut) in the selected year the line graph unable to show transition

Vote count:

0

I have developed donut chart(like years).When click on the selected year to show the line chart,but unable to show the transition,i developed for the given image like ![enter image description here][1] [1]: http://ift.tt/1FiqlfJ My problem is to click donut to show the animated line graph,and i have developed given code like css file and d3.js functions

            <style type="text/css>
          #pieChart {    
          position:absolute;
          top:10px;
          left:10px;
          width:400px;
          height: 400px; 
        }
        #lineChartMonth {    
          position:absolute;
          top:10px;
          left:410px;
          height: 400px;
        }
        .axis path, .axis line {
             fill:none;
             stroke:GhostWhite;
             stroke-width:2;
             shape-rendering:crispEdges;
        }

        .line {
          fill: none;
          stroke: LightGray;
          stroke-width: 3px;
        }
        .area{
          opacity: .2;
          fill:lightsteelblue;
        }
        </style>  
    svg1.append("path")
   .datum(funData)
   .attr("class", "area")
   .attr("d", area)
   .transition().duration(3000)
   .attrTween("d",pathTween)
function pathTween(){
     //console.log(startData) 
    var interpolator=d3.interpolateArray(startData,funName);
    //console.log(interpolator);

      return function(t){
        return area(interpolator(t));
      }
   }   

  svg1.append("path")
           .datum(funData)
           .attr("class", "area")
           .attr("d", area)
           .transition().duration(3000)
           .attrTween("d",pathTween)
        function pathTween(){
             //console.log(startData) 
            var interpolator=d3.interpolateArray(startData,funName);
            //console.log(interpolator);

              return function(t){
                return area(interpolator(t));
              }
           }   

       svg1.append("path")
            .attr("class", "line").attr("d",line(funName))
             .transition().duration(3000)
           .attrTween("d",pathTween)
       function pathTween(){
             //console.log(startData) 
            var interpolator=d3.interpolateArray(startData,funName);
            //console.log(interpolator);
              return function(t){
                return area(interpolator(t));
              }
           }   
My doubt is css paths are same so unable to show transition. 

asked 1 min ago

venky

1

D3.js when i clicked(donut) in the selected year the line graph unable to show transition