score:2
for creating this sub value indicator, you just need to set an arc generator who accepts the percentage value you want to set (here named subindicator
), with a padding in the outer and inner radiuses...
arc2 = d3.svg.arc()
.outerradius(radius - chartinset + 10)
.innerradius(radius - chartinset - barwidth - 10)
.startangle(perctorad(subindicator))
.endangle(perctorad(subindicator));
... and use it to append the new path:
chart.append('path')
.attr('d', arc2)
.style("stroke", "black")
.style("stroke-width", "2px");
pay attention to the fact that, given the way the author of the original code set their functions, the zero in the gauge is equivalent to 75%
. therefore, you have to set the percentage value accordingly. for instance, positioning the sub value indicator at 55%:
subindicator = totalpercent + (55 / 200);
here is a demo (using 55% for the sub value indicator):
(function () {
var needle, arc, arcendrad, arcstartrad, barwidth, chart, chartinset, degtorad, el, endpadrad, height, i, margin, needle, numsections, padrad, perctodeg, perctorad, percent, radius, ref, sectionindx, sectionperc, startpadrad, svg, totalpercent, width, subindicator;
percent = .65;
barwidth = 60;
numsections = 3;
// / 2 for half circle
sectionperc = [0.1, 0.25, 0.15];
padrad = 0;
chartinset = 10;
// start at 270deg
totalpercent = .75;
subindicator = totalpercent + (55/200)
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;
perctodeg = function (perc) {
return perc * 360;
};
perctorad = function (perc) {
return degtorad(perctodeg(perc));
};
degtorad = function (deg) {
return deg * math.pi / 180;
};
svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);
chart = svg.append('g').attr('transform', `translate(${(width + margin.left) / 2}, ${(height + margin.top) / 2})`);
// build gauge bg
for (sectionindx = i = 1, ref = numsections; 1 <= ref ? i <= ref : i >= ref; sectionindx = 1 <= ref ? ++i : --i) {
arcstartrad = perctorad(totalpercent);
arcendrad = arcstartrad + perctorad(sectionperc[sectionindx-1]);
totalpercent += sectionperc[sectionindx-1];
startpadrad = 0;
endpadrad = 0;
arc = d3.svg.arc().outerradius(radius - chartinset).innerradius(radius - chartinset - barwidth).startangle(arcstartrad + startpadrad).endangle(arcendrad - endpadrad);
chart.append('path').attr('class', `arc chart-color${sectionindx}`).attr('d', arc);
}
arc2 = d3.svg.arc().outerradius(radius - chartinset + 10).innerradius(radius - chartinset - barwidth - 10).startangle(perctorad(subindicator)).endangle(perctorad(subindicator));
chart.append('path').attr('d', arc2).style("stroke", "black").style("stroke-width", "2px");
needle = class needle {
constructor(len, radius1) {
this.len = len;
this.radius = radius1;
}
drawon(el, perc) {
el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);
return el.append('path').attr('class', 'needle').attr('d', this.mkcmd(perc));
}
animateon(el, perc) {
var self;
self = this;
return el.transition().delay(500).ease('elastic').duration(3000).selectall('.needle').tween('progress', function () {
return function (percentofpercent) {
var progress;
progress = percentofpercent * perc;
return d3.select(this).attr('d', self.mkcmd(progress));
};
});
}
mkcmd(perc) {
var centerx, centery, leftx, lefty, rightx, righty, thetarad, topx, topy;
thetarad = perctorad(perc / 2); // half circle
centerx = 0;
centery = 0;
topx = centerx - this.len * math.cos(thetarad);
topy = centery - this.len * math.sin(thetarad);
leftx = centerx - this.radius * math.cos(thetarad - math.pi / 2);
lefty = centery - this.radius * math.sin(thetarad - math.pi / 2);
rightx = centerx - this.radius * math.cos(thetarad + math.pi / 2);
righty = centery - this.radius * math.sin(thetarad + math.pi / 2);
return `m ${leftx} ${lefty} l ${topx} ${topy} l ${rightx} ${righty}`;
}};
needle = new needle(140, 15);
needle.drawon(chart, 0);
needle.animateon(chart, percent);
}).call(this);
//# sourceurl=coffeescript
.chart-gauge {
width: 400px;
margin: 10px auto;
}
.chart-color1 {
fill: #d82724;
}
.chart-color2 {
fill: #fcbf02;
}
.chart-color3 {
fill: #92d14f;
}
.needle,
.needle-center {
fill: #464a4f;
}
.prose {
text-align: center;
font-family: sans-serif;
color: #ababab;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class="chart-gauge"></div>
use the same approach for appending the sub value indicator text.
Source: stackoverflow.com
Related Query
- Gauge charts with sub value indicators and label
- d3 gauge chart with labels and percentages?
- D3.js - Donut charts with multiple rings and animation transition
- Mix bar and line charts with Rickshaw (d3 based graphing library for js)
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- d3 center tick and x-axis label when single value
- Conflict between d3.forceCollide() and d3.forceX/Y() with high strength() value
- d3 line and area charts not updating with new data array
- How to create left axis with variable tick interval in tick values and has same distance between tick value
- d3 horizontal bar chart with background and max value of 100%
- d3 multi line with mouse over cursor for both y AND x value
- How can we add legend's value beside of legend with proper alignment and different color in dc.js
- DC.js - Composite charts - Access the stack number inside renderlet and issue with gridlines
- Multiple d3 charts on a page with different (linear and log) axes
- Show value along with where needle is pointing in d3 gauge chart
- Update size and value of multiple donut charts d3.js
- Cypher, get all nodes with and relationships for a given label without duplicates, empty relationships or empty nodes
- X axis label not displayed in bar chart with scroll and zoom feature - d3js, Brushing
- Add a space between the axis and text with NVD3 charts
- hide X and Y axes on charts with n3-line-chart
- Showing a bar chart with expected value and current value for a series
- D3 js How to get plain text in label at X axis and make value scaleLog
- how to append a circle with a label to indicate information to rectangle node and remove the circle before download
- vertical bars not aligned with the x-axis label and last bar rendered outside the x-axis range - D3 js - simple bar with fixed width
- D3 Force Layout with text Label And Icon
- Gauge charts with custom ranges
- D3 Line chart - display value label on Y axis tick and a not scale
- How can I add a label with value to every point of the chart?
- d3.js: Display x-axis value and y-axis value in tooltip with two separate arrays
- Is there a way to display the value together with the label on the legend in C3js pie chart?
More Query from same tag
- D3 - Nesting multiple charts from the same dataset
- d3 v4 TypeScript DefinitelyTyped Angular2 line with ScaleTime on the X axis
- Text invisible yet appearing in inspector
- How to stop d3.drag triggering mouseover/mouseout events in chrome
- d3 - select/unselect node onclick
- D3.js - How to change position of labels on zoom
- Hide and show svg element with transition
- D3.js: Stop transitions interrupting on mouseover?
- Pie chart not updating properly when using brush in series chart
- d3.js filter() not displaying expected results
- Dimple.js barGap function not working
- D3 Tree Layout: I want to use jQuery to toggle all children
- svg / d3.js rounded corners on one side of a rectangle
- Within a D3 scatter chart, how can I anchor an image of variable size to the centre of a coordinate/point
- D3.js transition for set of rectangles
- DC.js stack in line chart not showing
- using d3.json method with Json object
- Are d3's reusable components objects?
- Animate area of a d3 line graph
- How to install & run colororacle?
- array_replace in D3.js?
- d3 basic append example not working
- In d3.js how to create a dynamic scale value for projection?
- border each node in a network created using networkD3::forceNetwork() with a specific color
- drawing d3.svg.arc element using data stored in array in d3.js
- Filtering element based on existence of child node
- How to highlight an array of words in D3 word cloud
- D3 iterating over selected JSON columns
- Updating d3 line graph shows incorrect data, perhaps due to path transitions
- DOM modification in mounted method not in JEST snapshot