[英]How can I add graphs/data to Rickshaw with d3.js?
這就是我所擁有的:
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重新生成。
我怎樣才能將這些數據放入人力圖中以便重新生成?
解決方案是設置更新功能以計算背景條的新高度,以獲得顯示的條形圖,您可以使用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);
});
}
其他代碼與你擺弄的幾乎相同,
我的小提琴在這里
請注意,我不知道如何計算風險點,我只是試圖獲得最大值。 我確定你可以通過查看console.log(series)
進行風險點計算
b_red,b_green,b_yellow是初始化背景條的d3選項。
在@ 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 );
現在,當圖形改變時,條形圖會發生變化 但是,它們不是規模化的。 這將是我的下一個任務。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.