score:2
the fill of the arc is determined by the color()
function on this line:
.style("fill", function(d) { return color(d.data.key); });
instead of using a function, we can pick from an array of colors based on the index. modify the above line to read:
.style("fill", function(d, i) { return color[i]; });
now we need to change the list of available colors based on the number of data points (number of keys in the data object). above the color()
function, add:
var datasize = object.keys(getdata()).length
var color = d3.scale.category20(); // this line was already here
finally, we need to change the color
variable from a function to an array. the array will vary based on the datasize
, so a switch
statement works great here. replace the color definition:
var color;
switch (datasize) {
case 2:
color = ['green' , 'gray'];
break;
case 3:
color = ['green', 'red', 'yellow'];
break;
}
this will give you green and gray when there are only two datapoints; and green, red, and yellow when there are 3 data points. you can add more case
s for more amounts of data points.
with two data points:
with three data points:
edit: since you are using more than one chart and set of data on the same page, you will need to move this whole block to inside the object.render()
function:
var datasize = object.keys(getdata()).length;
var color;
switch (datasize) {
case 2:
color = ['green' , 'gray'];
break;
case 3:
color = ['green', 'red', 'yellow'];
break;
}
and then change the datasize
variable to get the length of the passed in data
object's keys:
var datasize = object.keys(data).length;
Source: stackoverflow.com
Related Query
- Changing color range in a d3 reusable donut chart depending on the number of data points
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- D3.js: Changing the color of the bar depending on the value
- Changing the colors of each of the Stacked Bar chart with different Color in D3
- Using different data in the same donut chart
- nvd3.js - display specific color for each bar in multibar vertical chart depending on range of value
- Changing the color of an axis line in a D3 chart
- d3 Plus bar chart how to force fixed max y axis range independent of the max data value
- d3.js bar chart resize after changing the data
- d3.js changing data on click (multiple instances of Donut Chart )
- how to create labels for data in donut chart using d3.js
- Reduce the size of a large data set by sampling/interpolation to improve chart performance
- D3: How to dynamically refresh a graph by changing the data file source?
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How to change color of the dots in D3.js to reflect data on y scale?
- dimple.js How can I change the labels of a chart axis without changing the data?
- d3.js: How to add value below the label in donut chart
- Update donut chart using the c3 library (JQuery)
- Heatmap dc.js - provide the color range manually
- Changing the color of the Rainbow Worm
- d3v4 checkout chart - making sure the color scheme is correct for the legend and circles
- D3.js: plot dots on the existing line in a multiseries line chart with long formatted data
- How to word wrap the legend text for a donut chart
- How to change color of donut chart created using d3.js?
- Dimple.js - Add data labels to each bar of the bar chart
- Updating data values with HTML input and changing the data array
- Adding background color in d3 js bar chart using data values
- d3 donut chart arc retrieves wrong data
- Is it possible to insert an icon in the arc of a donut chart with D3?
- Chart is not showing the data array of objects
More Query from same tag
- Displaying crossover only in d3.js Slankey (Dynamic, Interactive)
- Perfomance Issue using selectAll in ie8 and ie9
- Linear scale not using range specified in d3
- dc.js geochoropleth map scaling
- show data of each circle of bubble chart in table d3.js
- Filtering GeoJSON data using array of values to create Leaflet map
- how to select svg element by variable name for id
- d3.js line chart with negative numbers
- How to add filters effects to Svg in d3
- d3 update tree layout with dynamic data
- C3.js chart title overlapped if I change the size of title
- D3 bind data of nested JSON document
- Resize D3 ForceSimulation on d3.vs4
- D3.js: Trying to build flat calendar
- Issues with 3d-force-graph node updates
- adding onClick event to show a hidden div above each bar in D3.js (maybe I'm missing important css code also?)
- Weird text behaviour in d3js after update function
- Axis with log scale, how to include tick for 0?
- d3.js - Add background rectangle on force directed diagram groups
- How do i use d3.js to create a bar chart in my Rails5 app
- How can I sum an array with D3?
- D3 time seriesline looks like area instead of line
- AngularJs ng-controller overrides
- d3: how to interpolate a string (with numbers in it) so that the numbers don't get interpolated
- How to add label on SVG circle in d3?
- Adding items to Json based on other data
- Showing JSON format in C3 (D3)
- dc.js render bar chart
- Adjust time scale in d3js
- How to zoom only on the X axis in a line chart in d3.js (v7)