散布図のD3js可変長シリーズ

Question

私は一連の可変数を持つことができるデータを持っています。これらのシリーズのそれぞれの中には、D3jsの散布図としてプロットしたい日付と数字があります。

これは私の（動作しない）コードです。それは私がそれをまっすぐ行うときに機能しますが、一旦$ .eachループを追加してはいけません。インデックス作成などの問題があることは確かです。

var color = d3.scale.category20(); 
// Now actually add the data to the graph 
$.each(mpgData, function(k, v) { 
    console.log(v); 
    //console.log(k); 
    svg.selectAll('circle') 
       .data(v) 
       .enter() 
       .append('circle') 
       .attr('cx', function(d, i) { 
        console.log(i); 
        //console.log(d); 
        return xScale(getDate(d[1])); 
       }) 
       .attr('cy', function(dd, ii) { 
        //console.log(ii); 
        return yScale(dd[2]); 

       }) 
       .attr('fill', function(d, i) { 
        return color(k); 
       }) 
       .attr("class", "mpgColorClass"+k) 
       .attr("r", 5) 
       .on("mouseover", function() { 
        d3.selectAll(".mpgColorClass"+k) 
         .attr("r", 8); 
       }) 
       .on("mouseout", function() { 
        d3.selectAll(".mpgColorClass"+k) 
         .attr("r", 5); 
       }); 
}); 

私は、私は関連する部分だと思うものを示しました。

そのコードの種類の作品です。しかし、それは6つのことしか示していない。第2のシリーズは6つのアイテムを持っているからだと思う。だから、どういうわけか、 "attr（ 'cx'、function（d、i））の部分のすべてをループしていないのですが、私はその関数をシリーズの各部にループさせる方法を理解していないと思います。私はD3jsの初心者ですから、まだ学習曲線を巡って苦労していますが、それは機能し、正しいデータでグラフを出力します。データはすべてではなく、全体の（可変の）データセットからわずか6ポイントです

おかげ

Answer 1

あなたの$ .eachで（）あなたはSVG要素で円の同じセットを上書きするブロックので、代わりのSelectAll（「円」）を使用してのあなたはこれを行うことができます！。

$.each(mpgData, function(k, v) { 
    svg.selectAll('circle' + k) 
       .data(v) 
       .enter() 
       .append('circle') 
       .attr('class','circle' + k) 
}); 

あなたのコードに細かい部分が残っています...自由に編集できます。