Вот что у меня есть:
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 рикши.
Как я могу поместить эти данные в график рикши, чтобы они были восстановлены?