# Gauge D3, display values positions

I'm trying to use some ready written javascript to make gauge. I'm almost there, but i cannot figure how to manage value captions.

Here is how my code works now:

And this is how I like it to work:

Don't know how to approach to problem. Working with those Math.Pi, Math.cos and Math.sin is just too much for me.

``````var name = "Value";

var value = 17;

var gaugeMaxValue = 100;

// data to calculate
var percentValue = value / gaugeMaxValue;

////////////////////////

var needleClient;

(function(){

var barWidth, chart, chartInset, degToRad, repaintGauge,
percent, radius, sectionIndx, svg, totalPercent, width;

percent = percentValue;

numSections = 1;
sectionPerc = 1 / numSections / 2;
chartInset = 10;

// Orientation of gauge:
totalPercent = .75;

el = d3.select('.chart-gauge');

margin = {
top: 20,
right: 20,
bottom: 30,
left: 20
};

width = el[0][0].offsetWidth - margin.left - margin.right;
height = width;
radius = Math.min(width, height) / 2;
barWidth = 40 * width / 300;

//Utility methods

percToDeg = function(perc) {
return perc * 360;
};

};

return deg * Math.PI / 180;
};

// Create SVG element
svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);

// Add layer for the panel
chart = svg.append('g').attr('transform', "translate(" + ((width + margin.left) / 2) + ", " + ((height + margin.top) / 2) + ")");

chart.append('path').attr('class', "arc chart-first");
chart.append('path').attr('class', "arc chart-second");
chart.append('path').attr('class', "arc chart-third");
formatValue = d3.format('1%');

repaintGauge = function ()
{
perc = 45/100;
var next_start = totalPercent;
next_start += perc / 2;

perc = 1-perc;
next_start += perc / 2;

chart.select(".chart-first").attr('d', arc1);
chart.select(".chart-second").attr('d', arc2);

}
/////////

var dataset = [{metric:name, value: value}]

var texts = svg.selectAll("text")
.data(dataset)
.enter();

texts.append("text")
.text(function(){
return dataset[0].metric;
})
.attr('id', "Name")
.attr('transform', "translate(" + ((width + margin.left) / 6) + ", " + ((height + margin.top) / 1.5) + ")")
.attr("font-size",25)
.style("fill", "#000000");

texts.append("text")
.text(function(){
return dataset[0].value;
})
.attr('id', "Value")
.attr('transform', "translate(" + ((width + margin.left) / 1.4) + ", " + ((height + margin.top) / 1.5) + ")")
.attr("font-size",25)
.style("fill", "#000000");

texts.append("text")
.text(function(){
return 0;
})
.attr('id', 'scale0')
.attr('transform', "translate(" + ((width + margin.left) / 100 ) + ", " + ((height + margin.top) / 2) + ")")
.attr("font-size", 15)
.style("fill", "#000000");

texts.append("text")
.text(function(){
return gaugeMaxValue/2;
})
.attr('id', 'scale10')
.attr('transform', "translate(" + ((width + margin.left) / 2.15 ) + ", " + ((height + margin.top) / 30) + ")")
.attr("font-size", 15)
.style("fill", "#000000");

texts.append("text")
.text(function(){
return gaugeMaxValue;
})
.attr('id', 'scale20')
.attr('transform', "translate(" + ((width + margin.left) / 1.03 ) + ", " + ((height + margin.top) / 2) + ")")
.attr("font-size", 15)
.style("fill", "#000000");

var Needle = (function() {

//Helper function that returns the `d` value for moving the needle
var recalcPointerPos = function(perc) {
var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
centerX = 0;
centerY = 0;
topX = centerX - this.len * Math.cos(thetaRad);
topY = centerY - this.len * Math.sin(thetaRad);
return "M " + leftX + " " + leftY + " L " + topX + " " + topY + " L " + rightX + " " + rightY;
};

function Needle(el) {
this.el = el;
this.len = width / 2.5;
}

Needle.prototype.render = function() {

return this.el.append('path').attr('class', 'needle').attr('id', 'client-needle').attr('d', recalcPointerPos.call(this, 0));

};

Needle.prototype.moveTo = function(perc) {
var self,
oldValue = this.perc || 0;

this.perc = perc;
self = this;

// Reset pointer position
return function(percentOfPercent) {
var progress = (1 - percentOfPercent) * oldValue;

repaintGauge(progress);
return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
};
});

this.el.transition().delay(300).ease('bounce').duration(1500).select('.needle').tween('progress', function() {
return function(percentOfPercent) {
var progress = percentOfPercent * perc;

repaintGauge(progress);
return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
};
});

};

return Needle;

})();

needle = new Needle(chart);
needle.render();
needle.moveTo(percent);

})();``````
``````       <style type="text/css" src="gauge.css">
.chart-gauge
{
width: 400px;
margin: 100px auto
}
.chart-first
{
fill: #66AB8C;
}
.chart-second
{
fill: #ff533d;
}

.needle, .needle-center
{
fill: #000000;
}
.text {
color: "#112864";
font-size: 16px;
}

svg {
font: 10px sans-serif;
}

</style>``````
``````<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<div class="chart-gauge"></div>``````

Its all about changing the translate for `text`

For example (for setting the max value of gauge):

``````  texts.append("text")
.text(function() {
return gaugeMaxValue + "%";//i added the percent(%)
})
.attr('id', 'scale20')
.attr('transform', "translate(" + ((width + margin.left) / 1.08) + ", " + ((height + margin.top) / 2) + ")")//then change the x and y for the translate
.attr("font-size", 15)
.style("fill", "#000000");
``````

Similarly for all other text values.

working code here