多条形图的d3多y轴

Question

我已经建立了一个类似于这个例子的图表

http://bl.ocks.org/mbostock/4679202

这里我想为每个系列都贴上y轴的标签。

下面的代码是我生成图形的代码

因为这是一个堆叠的布局。我觉得有点复杂，想象一下每个系列的y轴变换属性。

var margin = {top: 10, right: 5, bottom: -6, left: 5};

    var width = $(div).width(), 
    height = $(div).height() - margin.top - margin.bottom;

var svg = d3.select(div).append('svg')
      .attr('width',width)
      .attr('height',height)
      .append("g")
              .attr("transform", "translate("+margin.left+"," + margin.top + ")");;

var nest = d3.nest()
    .key(function(d) { return d.group; });

var stack = d3.layout.stack()
    .values(function(d) { return d.values; })
    .x(function(d) { return d.date; })
    .y(function(d) { return d.value; })
    .out(function(d, y0) { d.valueOffset = y0; });

var dataByGroup = nest.entries(data);

stack(dataByGroup);

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width-7], .25, 0);

var y0 = d3.scale.ordinal()
        .rangeRoundBands([height-15, 0], .2);

var timeFormat = d3.time.format("%c");

var MinuteNameFormat = d3.time.format("%H:%M");
var y1 = d3.scale.linear();
    var formatDate = function(d,i) {if(i%3 == 0){var date = new Date(parseInt(d)); return MinuteNameFormat(date);}else{return "";} };
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.minutes,15)
    .tickFormat(formatDate);

var yAxis = d3.svg.axis()
.scale(y1)
.orient("Left")
    .ticks(0)
    .tickFormat(formalLabel);

x.domain(dataByGroup[0].values.map(function(d) { return d.date; }));
y0.domain(dataByGroup.map(function(d) { return d.key; }));
y1.domain([0, d3.max(data, function(d) { return d.value; })]).range([y0.rangeBand(), 0]);



  var tooltip = d3.select(div)
.append("div")
.style("position", "absolute")
.style("z-index", "10").attr("class","tooltip")
.style("visibility", "hidden")
.style("background","#fff")
.style("border","1px solid #CCC")
.style("font-size", "11px")
.style("padding","11px")
.text("a simple tooltip");


 var group = svg.selectAll(".group")
    .data(dataByGroup)
    .enter().append("g")
    .attr("class", "group")
    .attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });

 group.filter(function(d, i) { return !i; }).append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(0," + y0.rangeBand() + ")")

    .call(yAxis);
     var tipText
  var bars = group.selectAll("rect")
  .data(function(d) { return d.values; })
  .enter().append("g");

bars.append("rect")
  .style("fill", function(d,i) { return getColor(d.ip); })
  .attr("x", function(d) { return x(d.date); })
  .attr("y", function(d) { return y1(d.value); })
  .attr("width",x.rangeBand()) //x.rangeBand()
  .attr("height", function(d) { return y0.rangeBand() - y1(d.value); });

    group.filter(function(d, i) { return !i; }).append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + y0.rangeBand() + ")")

  .call(xAxis);

这是我的d3图的代码

有人能提出建议吗？

Answer 1

这是完全可能的，但是如果你有超过2个y轴，一个在左边，一个在右边，它会使你的图形混乱。

下面是一个例子：http://bl.ocks.org/benjchristensen/2579619

使用以下代码声明一个轴：

var yAxis = d3.svg.axis()
.scale(y1)
.orient("Left")
    .ticks(0)
    .tickFormat(formalLabel);

您只需要为每个元素添加一个元素，还需要声明一个新的y1、y2、y3.等为每一个元素。最后，您需要确保每个数据绑定到不同的轴y1、y2、y3.等

希望这能有所帮助。