[英]d3 multiple y axis for multiple bar chart
我已經建立了一個像這個例子的圖表
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圖形的代碼
誰能建議??
這是完全可能的,但如果您的y軸超過2個,y軸位於左側,y軸位於右側,則會使您的圖表混亂。
這是一個示例: http : //bl.ocks.org/benjchristensen/2579619
您可以使用以下代碼聲明軸:
var yAxis = d3.svg.axis()
.scale(y1)
.orient("Left")
.ticks(0)
.tickFormat(formalLabel);
您只需要為每個元素放置1個,還需要為每個元素聲明一個新的y1,y2,y3 ...等。 最后,您需要確保每個數據都綁定到不同的軸y1,y2,y3 ...等
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.