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); 
    }); 

- そのライン1は、このようになります - が、私は）（入力部品不足していると思う

// 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 mains - 今はタイムスケールです。また、両方のチャートを参照して、上記の "make bar"コードを実際の関数に置き換える必要があります - 更新関数メソッドで再利用される - 各グラフについて？

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ドメインの設定は、チャートをレンダリングする際に使用する「都市」配列に基づいて行われます。しかし、更新機能では、yドメインとY軸の問題を設定するために "データ"配列を使用しているようです。
4. y軸へのトランジションも追加されました。
5. var paths = svg.selectAll(".line").selectAll("path")は、パス自体のクラス「ライン」を持っているため、必要なものではありません。関連するバージョンは次のようになります：svg.selectAll("path.line")
6. とにかく、選択が間違っていてフィルタリングに関する限り、パスは "ライン"機能を呼び出していますが、あなたのあなたは、このように正しいだろうとコードが同様の方法でパスの「valueline」
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); 
     } 
     }); 

は、この情報がお役に立てば幸いです。 :)