0

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!

GOK
  • 2,338
  • 6
  • 34
  • 63
  • Here's a good answer: http://stackoverflow.com/a/16197159/536610 or maybe this one: http://stackoverflow.com/a/21208204/536610 – Niklas Dec 16 '14 at 13:10
  • Where do we need to add color();? as per the answer??? @Niklas – GOK Dec 16 '14 at 13:23

0 Answers0