d3js合并了线/条形图

Question

我正在尝试绘制一条＆＃34;平均线＆＃34; - 通过多系列组图表。

我已经绘制了与系列数据匹配的一行 - 但我遇到了这个混合的几个问题。

1）仅绘制一条切断多系列的平均线

http://jsfiddle.net/0ht35rpb/276/

//在同一组图表上绘图

//draw prev line

    //previous line
var prevdata = [{
          "State": "a",
          "AA": 50,
          "BB": 250
        }, {
          "State": "b",
          "AA": 314,
          "BB": 150
        },{
          "State": "c",
          "AA": 121,
          "BB": 450
        }, {
          "State": "d",
          "AA": 114,
          "BB": 150
        }];

var keys1 = d3.keys(prevdata[0]).slice(1);

var newData1 = keys1.map(function(id) {
  return {
    id: id,
    values: prevdata.map(function(d) {
      return {
        State: d.State,
        value: d[id]
      };
    })
  };
});


// define the line
var valueline = d3.line()
  .curve(d3.curveBasis)
  .x(function(d) {
    return x0(d.State);
  })
  .y(function(d) {
    return y(d.value);
  });


g.selectAll(".line")
  .data(newData1)
  .enter().append("g")
  .attr("class", "line")
  .append("path")
  .attr("class", "line")
  .attr("d", function(d) {
  console.log("d", d)
    return valueline(d.values);
  })
  .style("stroke", function(d) {
    return "black";    
    //return z(d.id);
  });


///

//更新

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