CODEWITHSUNDEEP
javascriptd3.js
Preethi
Preethi

Reputation: 339

Donut chart in d3

i have donut chart with legend specification. I have 2 values in dataset. But here with this code i'm getting only the first value, "Unresolved". 

   var dataset = {
 Unresolved: [3],
Resolved:[7] 
};

   var keyValue=[];
   for(key in dataset){
   keyValue.push(key); 
    }

  var width = 260,
height = 300,
radius = Math.min(width, height) / 2;

    var color = ["#9F134C", "#ccc"];

    var pie = d3.layout.pie()
.sort(null);

    var arc = d3.svg.arc()
    .innerRadius(radius - 90)
    .outerRadius(radius - 80);

  var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

 var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");

   var path = gs.selectAll("path")
.data(function(d,i) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { console.log("log", keyValue[i]);return color[i]; }) //Here i'm getting only the 1st value "unresolved".
.attr("d", arc);

   var legendCircle =      d3.select("body").append("svg").selectAll("g").data(keyValue).enter().append("g")
                       .attr("class","legend")
                       .attr("width", radius)
                       .attr("height", radius * 2)
                       .attr("transform", function(d, i) {     return "translate(0," + i * 20 + ")"; });


         legendCircle.append("rect")
                .attr("width", 18)
               .attr("height", 10)
                .style("fill", function(d, i) { return color[i];});

    legendCircle.append("text")
               .attr("x", 24)
                .attr("y", 5)
                .attr("dy", ".35em")
                .text(function(d) { return d; });

The output i'm getting is,

enter image description here

Can anyone help on this? Thanks.

Upvotes: 1

Views: 703

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

It looks like you're doing a nested selection in your code, which you would usually only need for nested data. Your data is not nested however -- there's a single level with 2 values. What's happening is that, by using a nested selection, you're descending into the value arrays, each of which contains only a single value.

It works fine if you do away with the nested selection and pass your original data to the pie layout.

var gs = svg.selectAll("g").data(pie(d3.values(dataset))).enter().append("g");
var path = gs.append("path")
             .attr("fill", function(d, i) { return color[i]; })
             .attr("d", arc);

Complete example here.

Upvotes: 1

Related Questions