这就是我所拥有的:
http://jsfiddle.net/bozdoz/Q6A3L/
背景条代码:
maxData = 80000000;
maxHeight = 250;
var yScale = d3.scale.linear().
domain([0, maxData]). // your data minimum and maximum
range([0, maxHeight]); // the pixels to map to, e.g., the height of the diagram.
var riskpoints = [62000000,48000000,30000000];
var rectDemo = d3.select("#chart").
append("svg:svg").
attr("width", 400).
attr("height", maxHeight).
attr('class','risk');
rectDemo.append("svg:rect").
attr("x",0).
attr("y", maxHeight - yScale(riskpoints[0])).
attr("height", yScale(riskpoints[0]) - yScale(riskpoints[1])).
attr("width", '100%').
attr("fill", "rgba(0,100,0,.3)");
rectDemo.append("svg:rect").
attr("x",0).
attr("y", maxHeight - yScale(riskpoints[1])).
attr("height", yScale(riskpoints[1]) - yScale(riskpoints[2])).
attr("width", '100%').
attr("fill", "rgba(100,100,0,.3)");
rectDemo.append("svg:rect").
attr("x",0).
attr("y", maxHeight - yScale(riskpoints[2])).
attr("height", yScale(riskpoints[2])).
attr("width", '100%').
attr("fill", "rgba(100,0,0,.3)");
这正是我想要的, 除了 ,我已经将红色,黄色,绿色背景条固定为固定高度。
使用滑块时,或者更重要的是,当图形重新生成时(与实际数据一起),我希望背景条调整到正确的高度。
例如,在图像中,绿色条位于300M到200M之间。如果删除除红色(垂直)条以外的所有图形数据,则绿色条(水平)刚好超过40M。这是因为没有重新生成背景条的位置/高度,而是通过人力车javascript重新生成图形数据的位置/高度。
我怎样才能将这些数据放入人力图中以便重新生成?
答案 0 :(得分:3)
解决方案是设置更新功能以计算背景条的新高度, 要显示条形图,您可以使用graph.series.active();你也可能希望将vars保持在相同的范围内....
所以解决方案本身:
var maxHeight;
var background_update = function(graph) {
//skip 1st time;
if (maxHeight === undefined) {return;}
var series=graph.series.active();
maxHeight=yScale(get_maximum_all(series));
//console.log(maxHeight);
var red_riskpoint=get_maximum("y",series[0]);
var yellow_riskpoint=get_maximum("y",series[1]);
var green_riskpoint=get_maximum("y",series[2]);
//console.log(graph.series.active());
console.log(yScale(red_riskpoint),yScale(yellow_riskpoint),yScale(green_riskpoint));
// return;
b_red.attr("y", maxHeight - yScale(red_riskpoint)).attr("height", yScale(red_riskpoint));
b_yellow.attr("y", maxHeight - yScale(yellow_riskpoint)).attr("height", Math.abs(yScale(yellow_riskpoint) - yScale(red_riskpoint)));
b_green.attr("y", maxHeight - yScale(green_riskpoint)).attr("height", Math.abs(yScale(green_riskpoint) - yScale(yellow_riskpoint)));
console.log(maxHeight-yScale(green_riskpoint));
};
var get_maximum_all=function(series) {
var max=0;
for (var i in series) {
var stack=series[i].stack;
for (n in stack) {
if (stack[n].y>max) {max=stack[n].y;}
if (stack[n].y0>max) {max=stack[n].y0;}
}
}
return max;
}
var get_maximum=function(tag,object){
var max=0;
for (var i in object.stack) {
if (object.stack[i][tag]>max) {max=object.stack[i][tag];}
}
return max;
}
Rickshaw.Graph.RangeSlider = function(args) {
var element = this.element = args.element;
var graph = this.graph = args.graph;
$(element).slider({
range: true,
min: graph.dataDomain()[0],
max: graph.dataDomain()[1],
values: [
graph.dataDomain()[0],
graph.dataDomain()[1]
],
slide: function(event, ui) {
graph.window.xMin = ui.values[0];
graph.window.xMax = ui.values[1];
graph.update();
// if we're at an extreme, stick there
if (graph.dataDomain()[0] == ui.values[0]) {
graph.window.xMin = undefined;
}
if (graph.dataDomain()[1] == ui.values[1]) {
graph.window.xMax = undefined;
}
}
});
element.style.width = graph.width + 'px';
graph.onUpdate(function() {
var values = $(element).slider('option', 'values');
$(element).slider('option', 'min', graph.dataDomain()[0]);
$(element).slider('option', 'max', graph.dataDomain()[1]);
if (graph.window.xMin == undefined) {
values[0] = graph.dataDomain()[0];
}
if (graph.window.xMax == undefined) {
values[1] = graph.dataDomain()[1];
}
$(element).slider('option', 'values', values);
background_update(graph);
});
}
其他代码与你摆弄的几乎相同,
我的小提琴here
请注意,我不确定如何计算风险点,我只是试图获得最大值。我确定您可以通过查看console.log(series)
b_red,b_green,b_yellow它是d3选择的初始化背景条。
答案 1 :(得分:1)
在@ eicto的回答的帮助下,我找到了一些解决方案。
var maxHeight = 250;
var theSVG = d3.select("#chart svg");
//from @eicto: get the maximum value on the current chart
function get_maximum_all(series) {
var max=0;
for (var i in series) {
var stack=series[i].stack;
for (n in stack) {
if (stack[n].y>max) {max=stack[n].y;}
if (stack[n].y0>max) {max=stack[n].y0;}
}
}
return parseInt(max);
}
//create a function to call on graph update event
function createRiskPoints(riskpoints){
//these variables need to change on each graph update
var series = graph.series.active();
//this variable should be get_max_y_axis, but I don't know how to do that
var maxData = get_maximum_all(series);
var yScale = d3.scale.linear().
domain([0, maxData]).
range([0, maxHeight]);
//using dummy values for now
var riskpoints = (riskpoints) ? riskpoints : [300000000,200000000,100000000];
//insert the bars so they go behind the data values
theSVG.insert("svg:rect", ":first-child").
attr("x",0).
attr("y", maxHeight - yScale(riskpoints[0])).
attr("height", yScale(riskpoints[0]) - yScale(riskpoints[1])).
attr("width", '100%').
attr("fill", "rgba(0,100,0,.2)");
theSVG.insert("svg:rect", ":first-child").
attr("x",0).
attr("y", maxHeight - yScale(riskpoints[1])).
attr("height", yScale(riskpoints[1]) - yScale(riskpoints[2])).
attr("width", '100%').
attr("fill", "rgba(100,100,0,.2)");
theSVG.insert("svg:rect", ":first-child").
attr("x",0).
attr("y", maxHeight - yScale(riskpoints[2])).
attr("height", yScale(riskpoints[2])).
attr("width", '100%').
attr("fill", "rgba(100,0,0,.2)");
}
//call the function
createRiskPoints();
//call the function on graph update: thanks to @eicto
graph.onUpdate( createRiskPoints );
现在,当图表发生变化时,条形会发生变化;但是,它们不是规模化的。这将是我的下一个任务。