This time I am stuck in a circular axis for meter readings. I want to make readings and ticks along the circular path for meter gauge (just like speedometer):
However, I am not getting the exact idea or solution for it. Also, to be specific, I want to do it with D3.js only.
I have created the meter with some references, and tried to pull out some readings in it so far, but I don't feel what I have done is the most appropriate way to do this.
Please guide me through this. Here is my code : -
<!DOCTYPE html>
<meta charset="utf-8">
<title>Speedo-meter</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
svg
{
margin-left: 30px;
margin-top: 30px;
border: 1px solid #ccc;
}
</style>
<body>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = {
"title": "Meter Gauge",
"value": 50,
"maxValue": 200
};
startAngle = 90, endAngle = 270, innerRad=175 , outerRad=185 ;
var svg = d3.selectAll("body").append("svg")
.attr("width", 500)
.attr("height", 500);
var arc = d3.svg.arc()
.innerRadius(innerRad)
.outerRadius(outerRad)
.startAngle(90 * (Math.PI/180))
.endAngle(270 * (Math.PI/180));
var title = svg.append("text")
.attr("x", 50)
.attr("y", 50)
.style("text-anchor", "start")
.text("Click on the meter line to turn the needle");
var plot = svg.append("g")
.attr("class", "arc")
.attr("transform", "translate(100 , 150 )");
var gauge = plot.append("path")
.attr("d", arc)
.attr("class", "gauge")
.attr("fill", "#ddd")
.attr("stroke", "#000")
.attr("transform", "translate(150,130) rotate(180)")
.on("click", turnNeedle);
var needle = svg.append("g")
.attr("class", "needle")
.attr("transform", "translate( 100 , 110 )")
.append("path")
.attr("class", "tri")
.attr("d", "M" + (300/2 + 3) + " " + (120 + 10) + " L" + 300/2 + " 0 L" + (300/2 - 3) + " " + (120 + 10) + " C" + (300/2 - 3) + " " + (120 + 20) + " " + (300/2 + 3) + " " + (120 + 20) + " " + (300/2 + 3) + " " + (120 + 10) + " Z")
.attr("transform", "rotate(-100, " + 300/2 + "," + (120 + 10) + ")");
function turnNeedle()
{
needle.transition()
.duration(2000)
.attrTween("transform", tween);
//console.log(d3.select(".needle").attr("cx"));
function tween(d, i, a) {
return d3.interpolateString("rotate(-100, 150, 130)", "rotate(100, 150, 130)");
}
}
var Speeds = data.maxValue/20;
var divisions = ((endAngle-startAngle))/Speeds ;
console.log("divisions=>"+divisions);
j=0;
endAngle1 = startAngle+ 20;
startAngle = 72;
for(i=0;i<=10;i++)
{
endAngle = startAngle+ divisions;
newArc = d3.svg.arc()
.innerRadius(innerRad - 10)
.outerRadius(outerRad)
.startAngle((startAngle+=divisions) * (Math.PI/180))
.endAngle(endAngle * (Math.PI/180));
var gauge = plot.append("path")
.attr("d",newArc)
.attr("class", "gauge")
.attr("id", "gauge"+i)
.attr("fill", "#ddd")
.attr("stroke", "#000")
.attr("transform", "translate(150,130) rotate(180)")
.on("click", turnNeedle);
var text = plot.append("text")
.style("font-size",14)
.style("fill","#000")
.style("text-anchor", "start")
.attr("x", -165 + 6)
.attr("dy",".35em")
.append("textPath")
.attr("xlink:href","#gauge"+i)
.attr("startOffset",5)
.text(Speeds*i);
}
</script>
