d3js羣組和折線圖動畫 - 圖例切換

Question

我正在嘗試構建一個折線圖平衡的折線圖 - 用圖例切換。我不確定我的動畫是否正確 - 並且希望從結構上使圖表姐妹變得更加完美。

//組圖 http://jsfiddle.net/0ht35rpb/259/

//線圖 http://jsfiddle.net/0ht35rpb/262/

g.append("g") 
    .selectAll("g") 
    .data(data) 
    .enter().append("g") 
    .attr("class", "bar") 
    .attr("transform", function(d) { 
    return "translate(" + x0(d.State) + ",0)"; 
    }) 
    .selectAll("rect") 
    .data(function(d) { 
    return keys.map(function(key) { 
     return { key: key, value: d[key]}; 
    }); 
    }) 
    .enter().append("rect") 
    .attr("x", function(d) { 
    return x1(d.key); 
    }) 
    .attr("y", function(d) { 
    return y(d.value); 
    }) 
    .attr("width", x1.bandwidth()) 
    .attr("height", function(d) { 
    return height - y(d.value); 
    }) 
    .attr("fill", function(d, i) {    
    return z(d.key); 
    }); 

- 太行一個看起來是這樣的 - 但我認爲我缺少輸入（）部分

// define the line 
var valueline = d3.line() 
    .curve(d3.curveBasis) 
    .x(function(d) { 
     return x(parseTime(d.date)); 
    }) 
    .y(function(d) { 
     return y(d.temperature); 
    }); 

g.selectAll(".city") 
    .data(cities) 
    .enter().append("g") 
    .attr("class", "city") 
    .append("path") 
    .attr("class", "line") 
    .attr("d", function(d){ 
    return valueline(d.values); 
    }) 
    .style("stroke", function(d) { 
    return z(d.id); 
    }); 

此外，當涉及到切換傳說時，如何修復折線圖以動畫線條 - 並修復do主線 - 現在是一個時間表。同樣參考兩個圖表 - 我應該把上面看到的「make bars」「make lines」代碼放到一個實際的函數中 - 在更新函數方法中被重用 - 對於每個圖表？

Answer 1

這裏有一個fiddle有動畫根據您的要求。

相關代碼：

y.domain([ 
    d3.min(cities, function(c) { 
    if(filtered.indexOf(c.id) === -1) { 
    return d3.min(c.values, function(d) { 
     return d.temperature; 
    }); 
    } 
    }), 
    d3.max(cities, function(c) { 
    if(filtered.indexOf(c.id) === -1) { 
    return d3.max(c.values, function(d) { 
     return d.temperature; 
    }); 
    } 
    }) 
]); 

    g.select(".axis.axis--y").transition().duration(500) 
    .call(d3.axisLeft(y)); 

    g.selectAll('.city path').transition().duration(500).attr('d', function(d) { 
    if(filtered.indexOf(d.id) > -1) { 
     return null; 
    } else { 
     return valueline(d.values); 
    } 
    }); 

你的代碼是缺少了很多東西：

1. X軸是時間尺度，並在你的情況，你不需要更新X在更新函數中將軸作爲基於城市名稱而不是日期的切換。
2. 事件如果你有一個變化的X軸，你不會那樣改變域。時間尺度會查找日期，並且您似乎將其設置爲城市名稱。 （「newKeys」）
3. 設置y域將基於「cities」數組，因爲您使用該數組來繪製圖表。但在更新函數中，您似乎正在使用「數據」數組來設置y域並因此設置y軸問題。
4. 也增加了對y軸的轉換。
5. var paths = svg.selectAll(".line").selectAll("path")是不是你想要的，因爲你有類路徑本身的「線」。相關版本將爲：svg.selectAll("path.line")
6. 無論如何，路徑的過濾將不起作用，因爲選擇是錯誤的，就過濾而言，路徑正在調用「行」功能，而您的行功能代碼被定義爲「價值線」
7. 以類似的方式與路徑的過濾和你會以這種方式是正確的：

g.selectAll('.city path').transition().duration(500) 
    .attr('d', function(d) { 
     if(filtered.indexOf(d.id) > -1) { 
      return null; 
     } else { 
      return valueline(d.values); 
     } 
     }); 

希望這有助於。 :)