Линейный график круговой оси D3
Код и результат здесь: https://jsfiddle.net/nohjose/fdarxu7j/3/
Я кодировал радиальную линейную диаграмму d3 (или, по крайней мере, как d3), чтобы показать темпы генерации солнечных панелей за последние четыре года. Я хочу иметь одну линию в год (разного цвета в год) вне базового круга и с максимумом, установленным элементом управления (который изменяет значение переменной "амплитуда"). У меня есть данные за каждые 10 минут, при условии, что панели не генерируют 0 Вт, но для этого графика планируют усреднять данные за каждый день. У меня есть PHP-файл, который возвращает данные JSON в этой форме["2014-01-01 09:00:00","0.018"]["2014-01-01 09:00:00","0.018"]["2014-01-01 09:00:00","0.018"]["2014-01-01 09:00:00","0.018"]...Я не понимаю, как бы я теперь отобразил данные на моем графике? Я знаю, что это может быть недостаточно конкретно для Stackru, но я застрял в той точке, где у меня возникла конкретная техническая проблема, и я не уверен, куда еще обратиться. Доброту оценили: о)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Solar Generation Visualisation</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
.xAxis {
fill: yellow;
stroke: orange;
stroke-width: 3px;
}
.xBigTick {
fill: none;
stroke: red;
stroke-width: 1px;
}
.xSmallTick {
fill: none;
stroke: #303030;
stroke-width: 0.25px;
}
.axisText {
font-family: Lato;
font-weight: 300;
font-size: 8pt;
}
.button {
fill: silver;
stroke: gray;
stroke-width: 3px;
}
</style>
</head>
<body>
<script type="text/javascript">
// Get the data
var data;
d3.json("./test.php", function(error, json) {
if (error) return console.warn(error);
data = json;
data.forEach(function(d) {
d.Timestamp = parseDate(d.Timestamp);
d.Power = +d.Power;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.Timestamp; }));
y.domain([0, d3.max(data, function(d) { return d.Power; })]);
});
</script>
<script type="text/javascript">
var canvasWidth= 1000;
var canvasHeight= 500;
var originx = canvasWidth/2;
var originy = canvasHeight/2;
var pi = Math.PI;
var DRratio = pi/180;
var degPerDay = 360/365;
var radPerDay = degPerDay*DRratio;
var bigTick = 100;
var smallTick = 20;
var baseRad = canvasHeight/2-bigTick;
//var baseRad = 200;
var amplitude = 1; //for magnifying the y axis data
var textMargin = 25;
var textMargin180 = 11;
var angleAdjust = 1.5*DRratio;
var angleAdjust180 = 5*DRratio;
var monthAngleAdjust = -18*DRratio;
var week = 0;
// Canvas
var svg = d3.select("body")
.append("svg")
.attr("width", canvasWidth)
.attr("height", canvasHeight);
// x axis line (radial version)
var circle = d3.select("svg")
.append("circle")
.attr("cx", originx)
.attr("cy", originy)
.attr("r", baseRad)
.attr("class", "xAxis");
// weekly (big) tick marks
for (a=0; a<=2*pi; a+=(radPerDay)*7) {
var line = d3.select("svg")
.append("line")
.attr("x1", originx + (baseRad * Math.cos(a)))
.attr("y1", originy + (baseRad * Math.sin(a)))
.attr("x2", originx + ((baseRad + bigTick) * Math.cos(a)))
.attr("y2", originy + ((baseRad + bigTick) * Math.sin(a)))
.attr("class", "xBigTick");
};
// axis labels
for (a=0; a<=2*pi; a+=(radPerDay)*7) {
var group = d3.select("svg")
.append("g")
//console.log('week-' + week + ' angle:' + a/DRratio + 'degrees'+ ' cos:' + Math.cos(a)+ ' Sin:' + Math.sin(a));
var text = d3.select("g")
.append("text")
.attr("class", "axisText")
.attr("style", "fill:black")
.attr("opacity", "1")
.text(week);
// adjust the label orientation & tweak the position
if (a > 0 && (a < (pi/2))){
text.attr("transform", "translate(" + (originx + (baseRad - textMargin) * Math.cos( -a+angleAdjust )) + "," + (originy - (baseRad - textMargin) * Math.sin( -a+angleAdjust )) + ")rotate(" + (a/DRratio) +")");
}
if ((a > (pi/2)) && (a < (3*pi/2))){
text.attr("transform", "translate(" + (originx + (baseRad - textMargin180) * Math.cos( -a+angleAdjust180 )) + "," + (originy - (baseRad - textMargin180) * Math.sin( -a+angleAdjust180 )) + ")rotate(" + (a/DRratio+180) +")");
}
if ((a > (3*pi/2)) && (a < (2*pi))){
text.attr("transform", "translate(" + (originx + (baseRad - textMargin) * Math.cos( -a+angleAdjust )) + "," + (originy - (baseRad - textMargin) * Math.sin( -a+angleAdjust )) + ")rotate(" + (a/DRratio) +")");
}
week=week+1;
};
// weekly (big) tick marks
for (a=0; a<=2*pi; a+=(radPerDay)*7) {
var line = d3.select("svg")
.append("line")
.attr("x1", originx + (baseRad * Math.cos(a)))
.attr("y1", originy + (baseRad * Math.sin(a)))
.attr("x2", originx + ((baseRad + bigTick) * Math.cos(a)))
.attr("y2", originy + ((baseRad + bigTick) * Math.sin(a)))
.attr("class", "xBigTick");
};
// month labels
var inrad = 100;
var outrad = baseRad - textMargin;
var months= [31,28,31,30,31,30,31,31,30,31,30,31];
var month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var mr = 0;
// monthly (inner) lead lines
for (a=0; a<=11; a+=1) {
var line = d3.select("svg")
.append("line")
.attr("x1", originx + (inrad * Math.cos(mr)))
.attr("y1", originy + (inrad * Math.sin(mr)))
.attr("x2", originx + (outrad * Math.cos(mr)))
.attr("y2", originy + (outrad * Math.sin(mr)))
.attr("class", "xBigTick");
mr = mr + months[a]*radPerDay;
//console.log('cumulative day at end of month: ' + m + '(' + (m * radPerDay) + ')');
};
md = 0;
mr = 0;
//month text
for (a=0; a<=11; a+=1) {
var group = d3.select("svg")
.append("g")
//console.log('week-' + week + ' angle:' + a/DRratio + 'degrees'+ ' cos:' + Math.cos(a)+ ' Sin:' + Math.sin(a));
var text = d3.select("g")
.append("text")
.attr("class", "axisText")
.attr("style", "fill:black")
.attr("opacity", "1")
.text(month[a]);
// adjust the month label orientation & tweak the position
if (md >= 0 && (md < 90)){
text.attr("transform", "translate(" + (originx + ((inrad - textMargin) * Math.cos( -mr+monthAngleAdjust ))) + "," + (originy - ((inrad - textMargin) * Math.sin( -mr+monthAngleAdjust ))) + ")rotate(" + (md) +")");
}
if ((md > 90) && (md < 270)){
text.attr("transform", "translate(" + (originx + (inrad ) * Math.cos( -mr+monthAngleAdjust )) + "," + (originy - (inrad) * Math.sin( -mr+monthAngleAdjust )) + ")rotate(" + (md+180) +")");
}
if ((md >270) && (md < 360)){
text.attr("transform", "translate(" + (originx + (inrad - textMargin) * Math.cos( -mr+monthAngleAdjust )) + "," + (originy - (inrad - textMargin) * Math.sin( -mr+monthAngleAdjust )) + ")rotate(" + (md) +")");
}
md = md + months[a]*degPerDay;
mr = mr + months[a]*radPerDay;
//console.log(md + "deg = " + mr + "rad");
};
// daily (small) tick marks
for (a=0; a<=2*pi; a+=(radPerDay)) {
var line = d3.select("svg")
.append("line")
.attr("x1", originx + (baseRad * Math.cos(a)))
.attr("y1", originy + (baseRad * Math.sin(a)))
.attr("x2", originx + ((baseRad + smallTick) * Math.cos(a)))
.attr("y2", originy + ((baseRad + smallTick) * Math.sin(a)))
.attr("class", "xSmallTick");
};
//control handle (move to adjust amplitude)
var circle = d3.select("svg")
.append("circle")
.attr("cx", originx)
.attr("cy", originy)
.attr("r", 10)
.attr("class", "button");
</script>
</body>
</html>