d3.js - Fixing color to each path for donut in d3js -
d3.js - Fixing color to each path for donut in d3js -
i drawing donut in d3js. had 3 values in array dataset (e.g totalpop, ruralpop,urbanpop-----> [1000,2000,3000]).i want these values fill specific color in donut (e.g totalpop - reddish color,ruralpop - blue, urbanpop-orange)
below have tried in code
var color = d3.scale.ordinal() .domain([totalpop,ruralpop,urbanpop]) .range(["red","blue","orange"]); var dataset = [parseint(totalpop),parseint(ruralpop),parseint(urbanpop)]; var arc = d3.svg.arc() .innerradius(r-20) .outerradius(r); var pie = d3.layout.pie() .value(function(dataset){return dataset;});
the main code color appending
var arcs = groupx.selectall(".arc") .data(pie(dataset)) .enter() .append("g") .attr("class","arc");
here have added color path
arcs.append("path") .attr("d",arc) .attr("fill",function(dataset){return color(dataset.data)});
i have found solution, here goes, instead of adding @ end have added color the path when creating
var color = d3.scale.ordinal() .domain(parseint(totalwater),parseint(ruralwater),parseint(urbanwater)) .range(["red","blue","orange"]); var arcs = groupx.selectall(".arc") .data(pie(dataset)) .enter() .append("g") .attr("class","arc") .attr("fill",function(dataset,i){return color(i)}) arcs.append("path") .attr("d",arc)
d3.js
Comments
Post a Comment