我有3个y轴和一个x轴的图表,必须放大所有3轴.
! DEMO
是否可以设置所有3 y轴,中心为0?如果我缩放图表滴答必须保持在同一个地方?
或者,也许,说"在0值之间始终只显示10个滴答".例如:
范围1 - > [10..0 ..- 10]
范围2 - > [350..0 ..- 350]
范围3 - > [0,1..0..0,9]
但是来自所有3个范围的所有蜱必须保持在相同的位置.
UPDATE
//zooming
var zoom0 = d3.behavior.zoom().x(x).y(_y[0]).on("zoom", zoomed);
var zoom1 = d3.behavior.zoom().y(_y[1]);
var zoom2 = d3.behavior.zoom().y(_y[2]);
***
function zoomed() {
zoom1.scale(zoom0.scale());
zoom1.translate(zoom0.translate());
zoom2.scale(zoom0.scale());
zoom2.translate(zoom0.translate());
graph.select(".x.axis").call(xAxis);
for (var i = 0; i < _y.length; i++) {
graph.select(".y.ax" + i).call(_yAxis[i]);
graph.select('.line.ax' + i).attr('d', _lineGenerator(i));
}
}
更新v3:
更新第4版:
是否可以在y轴上的刻度之间设置填充?或者更好地说"禁用刻度线之间的距离,并将其设置为固定值"
.tickValues() - doesn't help in this case...
function create_Y_axes() {
var _key, _currentKeyIndex, yDomain_before, yDomain_after, yD_min, yD_max, _index;
for (var i = 0; i < series.length; i++) {
_key = series[i]["unit"];
_currentKeyIndex = yCategories.indexOf(_key);
if (_currentKeyIndex === -1) {
//If key not found in array
yCategories.push(_key);
series[i]["yAxis"] = yCategories.length - 1;
_y.push(
d3.scale.linear()
.domain(d3.extent(series[i]["UNIT_DATA"], function(d,i){return d.wert;}))
.range([chartHeight, 0])
.nice()
);
} else {
series[i]["yAxis"] = _currentKeyIndex;
}
} //for
var yDomain,min, max, ticks = 10, r1,r2,range,stepL,stepR, t, tArray, h;
for (var i = 0; i < _y.length; i++) {
yDomain = _y[i].domain();// [-60, 60]
min = yDomain[0];// -60
max = yDomain[1];// 60
h = Math.floor((ticks / 2));
stepL = (Math.abs(min / h));
stepR = (Math.abs(max / h));
r1 = d3.range(min, 0 - stepL, stepL);
r2 = d3.range(0, max + stepR, stepR);
tArray = d3.merge([r1, r2]);
t = d3.scale.ordinal().domain(tArray).rangePoints([chartHeight, 0]).domain();
_yAxis.push(
d3.svg.axis()
.scale(_y[i])
.orient("left")
.tickPadding(5)
.tickValues(t)
.tickFormat(function(d){return d.toFixed(2);})
);
}
}// createYaxes()
更新v5:
这就是我需要的:
我创建了这个没有d3.axis.***的3个y轴,但是这个解决方案非常糟糕:)我会在我的图表中使用d3-API!
请帮我!!!!
brenzy.. 5
以下是您的代码修改,以使得滴答在0处排成一行.需要注意的一些更改在代码中通过以下方式进行注释:
//***
主要变化是,如果您希望刻度线在零处排列并且在所有三个轴上具有相同的刻度数高于和低于零,则您的域应该以零为中心.
我在每个缩放/平移上重新生成刻度值,显示最小值,最大值和等间距值.您可能想要进行一些舍入,或者如果它在可见域中,则强制零为刻度值.
以下是您的代码修改,以使得滴答在0处排成一行.需要注意的一些更改在代码中通过以下方式进行注释:
//***
主要变化是,如果您希望刻度线在零处排列并且在所有三个轴上具有相同的刻度数高于和低于零,则您的域应该以零为中心.
我在每个缩放/平移上重新生成刻度值,显示最小值,最大值和等间距值.您可能想要进行一些舍入,或者如果它在可见域中,则强制零为刻度值.