d3.js DONUT/PIE chart how to add own set of color pallettes combination for the pie/donut chart

239 Views Asked by At

I have created a Donut chart using the following code using d3.js, requirement is to use colors coming from backend to be shown for the Donut chart rather than using the inbuilt colors in the d3.scale.category**()'s

    <script>
var width = 260,
    height = 150,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();
  var domain = ["bbb", "ddd", "ccc", "23", "hello"];

var pie = d3.layout.pie()
    .value(function(d) { return d.apples; })
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 10)
    .outerRadius(radius - 2);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("style","left: 480px;top: 120px;position: absolute;")
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.tsv("data.tsv", function(error, data) {
  var path = svg.datum(data).selectAll("path")
        .data(pie)
        .enter().append("path")
        .attr("fill", function(d, i) { console.log(color(i)); return color(i); })
        .attr("d", arc);

});
</script>

Any ways to override the color using own pallettes combination from backend or in array or something like below: var colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];

Thanks in advance!

0

There are 0 best solutions below