javascript - D3 Pie chart add scroll bar to Legends -


i facing issue getting more 30 legends , legends not shown in vertical way nor horizontal way. add scrollbar legend box legends visible scroll or there way add legends side side 3 in row that

i tried adding overflow property not work. below code 

 var data =[]; for(var p = 0 ;p <unique.length;p++) {  data.push({   legendlabel:unique[p],   magnitude:uniquecount[p]  }); }    var canvaswidth = this.getwidth(), //width       canvasheight = this.getheight(),   //height       outerradius = 60,   //radius       color = d3.scale.category20(); //builtin range of colors      var vis = d3.select("#"+this.htmlobject)       .append("svg:svg") //create svg element inside <body>         .data([data]) //associate our data document         .attr("width", canvaswidth) //set width of canvas         .attr("height", canvasheight) //set height of canvas         .append("svg:g") //make group hold our pie chart           .attr("transform", "translate(" + 1.5*outerradius + "," + 1.5*outerradius + ")") // relocate center of pie 'outerradius,outerradius'       .attr('transform', 'translate(' + (canvaswidth/2 -  50) +  ',' + canvasheight/2 +')');           vis.append("text")         .attr("x",50)                      .attr("y", -110)         .attr("text-anchor", "middle")           .style("font-size", "14px")          .text("response code vs count(last 20 mins)");           if(unique.length === 0)         {           vis.append("text")         .attr("x",50)                      .attr("y", 0)         .attr("text-anchor", "middle")           .style("font-size", "12px")          .text("no failure transactions");         }      // create <path> elements using arc data...     var arc = d3.svg.arc()       .outerradius(outerradius);      var pie = d3.layout.pie() //this create arc data given list of values       .value(function(d) { return d.magnitude; }); // binding each value pie       // select <g> elements class slice (there aren't yet)     var arcs = vis.selectall("g.slice")       // associate generated pie data (an array of arcs, each having startangle,       // endangle , value properties)        .data(pie)       // create <g> elements every "extra" data element should associated       // selection. result creating <g> every object in data array       .enter()       // create group hold each slice (we have <path> , <text>       // element associated each slice)       .append("svg:g")       .attr("class", "slice");    //allow style things in slices (like text)      arcs.append("svg:path")       //set color each slice chosen color function defined above       .attr("fill", function(d, i) { return color(i); } )       .attr("data-legend",function(d) { return d.data.legendlabel +"->" + d.data.magnitude})       //this creates actual svg path using associated data (pie) arc drawing function       .attr("d", arc);       // add magnitude value larger arcs, translated arc centroid , rotated.     arcs.filter(function(d) { return d.endangle - d.startangle > .2; }).append("svg:text")       .attr("dy", ".35em")       .attr("text-anchor", "middle")       //.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })       .attr("transform", function(d) { //set label's origin center of arc         //we have make sure set these before calling arc.centroid         d.outerradius = outerradius; // set outer coordinate         d.innerradius = outerradius/2; // set inner coordinate         return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")";       })       .style("fill", "white")       .style("font", "bold 12px arial")       .text(function(d) { return d.data.magnitude; });         legend = vis.append("g")     .attr("class","legend")     .attr("overflow-y","auto")         .attr("transform","translate(70,-50)")     .style("font-size","13px")     .call(d3.legend);            // computes angle of arc, converting radians degrees.     function angle(d) {        var = 180;       return > 90 ? - 180 : a;     }   }   else   {     var canvaswidth = this.getwidth(), //width       canvasheight = this.getheight(),   //height       outerradius = 75,   //radius       color = d3.scale.category20(); //builtin range of colors            var vin = d3.select("#"+this.htmlobject)       .append("svg:svg") //create svg element inside <body>         .attr("width", canvaswidth) //set width of canvas         .attr("height", canvasheight) //set height of canvas         .append("svg:g"); //make group hold our pie chart         vin.append("text")         .attr("x",200)                      .attr("y", 30)         .attr("text-anchor", "middle")           .style("font-size", "14px")          .text("response code vs count(last 20 mins)");      vin.append("text")         .attr("x",200)                      .attr("y", 100)         .attr("text-anchor", "middle")           .style("font-size", "12px")          .text("no data found");   }


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more