dogrunjp
8/16/2014 - 10:23 AM

D3.jsでもmulti seriesのラインチャートのデータやアップデートは他のグラフに比べると少し複雑です。multi-serisチャートでは配列の中の配列の値を座標の値に利用するため、データセットを配列にマッピングしなおす必要があります。また、グラフのアップデートは通常のe

D3.jsでもmulti seriesのラインチャートのデータやアップデートは他のグラフに比べると少し複雑です。multi-serisチャートでは配列の中の配列の値を座標の値に利用するため、データセットを配列にマッピングしなおす必要があります。また、グラフのアップデートは通常のexit().remove()では無くsvgパスのパスデーター（d）を書き換えるように行います。以下データのマッピング〜チャートの描画の大まかな流れのみピックアップしてメモします。

multi-series-linechart-update.js
content_copyfile_download
var svg = d3.select("#chart").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  
x = d3.scale.ordinal()
  .rangeBand([0, width]);
y = d3.scale.linear()
  .rangeBand([height, 0]);
  
//var colorList = ["#222222", "#333333"..]のようなオリジナルの配色を使う場合配色のレンジ。
//domainはトップ１０に固定しています。
var color = d3.scale.ordinal()
  .range(colorList)
  .domain ([0, 9])

var line = d3.svg.line()
  .x(function(d){ return x(d.label) + x.rangeBand()})
  .y(function(d){ return y(d.value)});
  
d3.csv("data.csv", function(error, data){
  //index行以外のラベルを取得
  var varNames = de.key(data[0])
    .filter(function(key){retrun key != ixLabel;});
    
  //階層化したarrayにデータをマッピング。mapは３属性まで指定できる。
  //インタラクティブなチャートの実装のため、vis属性を最後に追加している。
  var seiriesData = varNames.map(function(name){
    return{
      name: name,
      values: data.map(function(d){
        return(name: name), label:d[ixLabel],value: +d[name]};
      }),
      vis: "0"
    }
  })
  
  var charts = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")" );
    
  var chart = charts.selectAll(".chart")
    .data(seriesData)
    .enter().append('g')
    .attr('class', 'chart')
    
  chart.append("path")
    .attr("class", "line")
    .attr("d", function(d){
      if(d.vis =="0"){return line(d.values);}else{return null}
    })
    .style("stroke, function(d)"{
      return color(d.nmae);
    })
    .style("stroke-width", "2px")
    .style("fill", "none");
    
  //項目名をtextとして描画します。またこのオブジェクトをクリックするこで
  //対応するグラフの描画がon-offされるようイベントを追加します。
  chart.append("text")
    .attr("x", 20)
    .attr("y", function(d, i){
      return i * 25
    })
    .text(function(d){return d.name})
    .on("click", function (d){
      if(d.vis == "1"){d.vis = "0"}else{d.vis="1";}
          chart.select('path').transition().duration(1000)
              .attr("d", function (d) {
                  if(d.vis=="1"){return line(d.values);}else{return null}
                  })
    })
  };