D3轉換。與線圖和多線工作想線之間的平穩過渡，當按下按鈕

Question

我有寫在D3一點線圖，我想它在這樣一種方式，一個SVG線路徑是表現圖形打開時可見，然後當用戶單擊按鈕時，我希望現有的svg線路徑平滑過渡到表示新的稍微不同的數據集的線路徑。

我可以過渡常規屬性就好了，但轉變已經難倒我的「d」屬性。該代碼是在這裏

var w = 500; 
 
var h = 300; 
 
var padding = 30; 
 

 
var dataset = [ 
 
    [1.3, 2015], 
 
    [2.1, 2036.25], 
 
    [3.4, 2057.5], 
 
    [3.5, 2057.5], 
 
    [4, 2100] 
 
]; 
 

 
//Create scale functions 
 
var yScale = d3.scale.linear() 
 
    .domain([0, 4]) 
 
    .range([h - padding, padding]); 
 

 
var xScale = d3.scale.linear() 
 
    .domain([2015, 2100]) 
 
    .range([padding, w - padding * 2]); 
 

 
//Define X axis 
 
var xAxis = d3.svg.axis() 
 
    .scale(xScale) 
 
    .orient("bottom"); 
 

 
//Define Y axis 
 
var yAxis = d3.svg.axis() 
 
    .scale(yScale) 
 
    .orient("left"); 
 

 
//Create SVG element 
 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", w) 
 
    .attr("height", h); 
 

 
var lineFunc = d3.svg.line() 
 
    .x(function(d) { 
 
    return xScale(d[1]); 
 
    }) 
 
    .y(function(d) { 
 
    return yScale(d[0]); 
 
    }) 
 
    .interpolate('linear'); 
 

 
svg.append('svg:path') 
 
    .transition() 
 
    .attr('d', lineFunc(dataset)) 
 
    .attr('class', 'dataline'); 
 

 

 
//Create X axis 
 
svg.append("g") 
 
    .attr("class", "axis") 
 
    .attr("transform", "translate(0," + (h - padding) + ")") 
 
    .call(xAxis); 
 

 
//Create Y axis 
 
svg.append("g") 
 
    .attr("class", "axis") 
 
    .attr("transform", "translate(" + padding + ",0)") 
 
    .call(yAxis); 
 

 
//create event listener and data reset functions 
 
d3.select("button") 
 
    .on("click", function() { 
 
    dataset = [ 
 
     [1, 2015], 
 
     [2.05, 2036.25], 
 
     [3.25, 2057.5], 
 
     [3.3, 2057.5], 
 
     [3.7, 2100] 
 
    ]; 
 
    var dynamoBar = svg.append('svg:path') 
 
     .transition() 
 
     .attr("d", lineFunc(dataset)) 
 
     .attr("class", "dataline"); 
 
    })

 .axis path, 
 
     .axis line { 
 
      fill: black; 
 
      stroke: none; 
 
      shape-rendering: crispEdges; 
 
     } 
 

 
     .axis text { 
 
      font-family: sans-serif; 
 
      font-size: 11px; 
 
     } 
 

 
     .dataline { 
 
      stroke: purple; 
 
      stroke-width: 1; 
 
      fill: none; 
 
     }

<button id="button">Try it</button> 
 
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

Answer 1

當您選擇使用新的數據轉換（按鈕點擊後）行了，你要創建一個新的path：

var dynamoBar = svg.append('svg:path')... 

相反，請選擇現有路徑：

var dynamoBar = svg.select('.dataline')... 

看到這個小提琴：http://jsfiddle.net/henbox/L2hehcry/