d3.js - D3 adding pie chart prevents sortability of bar chart -


i have created bar chart sorts. when add pie chart page find bar chart won't sort anymore.

each uses separate data called 'data' , 'data1' respectively , each separate svg's appended separate div's id's 'bar_chart' , 'pie respectively.

when comment out pie-chart bar chart sorts correctly again.

jsfiddle-complete , here same code without pie chart jsfiddle-no-pie-chart

the working jsfiddle has complete code.

    <!doctype html>      <body>       <div>         <form id="form">           <input type="radio" name="stack" value="val1">blue (val1)           <br>           <input type="radio" name="stack" value="val2">white (val2)           <br>           <input type="radio" name="stack" value="val3">green (val3)           <br>         </form>       </div>       <div id="bar_chart">       </div>       <div id="pie">       </div>       <script src="https://d3js.org/d3.v4.min.js"></script>       <script>         var data = [.........]          var data2 = [........]          data.foreach(function(d) {           d.value = +d.value;         });          var margin = {             top: 50,             right: 50,             bottom: 100,             left: 80           },           width = 1500 - margin.left - margin.right,           height = 600 - margin.top - margin.bottom;          var x = d3.scaleband()           .domain(data.map(function(d) {             return d.name           }))           .range([0, width / 4]);          var y1 = d3.scalelinear()           .domain([0, d3.max(data, function(d) {             return d.val1           })])           .range([height, 0]);          var y2 = d3.scalelinear()           .domain([0, d3.max(data, function(d) {             return d.val2           })])           .range([height, 0]);          var y3 = d3.scalelinear()           .domain([0, d3.max(data, function(d) {             return d.val3           })])           .range([height, 0]);          var svg = d3.select("#bar_chart")           .data(data)           .append("svg")           .attr("width", width + margin.left + margin.right)           .attr("height", height + margin.top + margin.bottom)           .append("g")           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");          var xaxis = d3.axisbottom(x)         svg.append("g")           .attr("class", "x axis")           .attr("transform", "translate(0," + height + ")")           .call(xaxis);          // add y axis         svg.append("g")           .attr("class", "axis")           .call(d3.axisleft(y1)             .ticks(7));          var tooltip = d3.select("#info")           .append("div")           .style("position", "absolute")           .style("z-index", "10")           .style("visibility", "hidden");          var rects = svg.selectall('rect')           .data(data);          //********* bar chart 1 ****************         var newrects1 = rects.enter();          newrects1.append('rect')           .attr('x', function(d, i) {             return x(d.name);           })           .attr('opacity', 0.85)           .attr('width', 40)           .attr("transform", "translate(" + 27 + ",0)")           .style('fill', 'blue')           .style('stroke', 'gray')           .attr('class', 'bar')           .attr('y', function(d, i) {             return y1(d.val1);           })           .attr('height', function(d, i) {             return height - y1(d.val1)           });          //********* bar chart 2 ****************       .........       .........  d3.selectall("input[name='stack']").on("change", change);      function change() {        var x0 = x.domain(data.sort(this.value == "val1" ?           (function(a, b) {             return b.val1 - a.val1;           }) : ((this.value == "val2") ?             (function(a, b) {               return b.val2 - a.val2;             }) : (function(a, b) {               return b.val3 - a.val3;             }))).map(function(d) {           return d.name;         }))         .copy();        svg.selectall(".bar")         .sort(function(a, b) {           // console.log("transition name001")           return x0(a.name) - x0(b.name);         });        var transition = svg.transition().duration(750),         delay = function(d, i) {           // console.log("transition name002")           return * 50;         };        transition.selectall(".bar")         .delay(delay)         .attr("x", function(d) {           // console.log("transition name003")           return x0(d.name);         });        transition.select(".x.axis")         .call(xaxis)         .selectall("g")         .delay(delay);     }         //******** pie chart **********          var width = 300,           height = 300,           radius = math.min(width, height) / 2;          var color = ["#2c93e8", "#838690", "#f56c4e", "#a60f2b", "#648c85", "#b3f2c9", "#528c18", "#c3f25c"];          // generate array object on categories category         var category_count = d3.nest()           .key(function(d) {             return d.category;           })           .rollup(function(leaves) {             return leaves.length;           })           .entries(data2);          var category_arcs = d3.pie()           .value(function(d) {             return d.value;           })           (category_count);          var pie = d3.pie()           .value(function(d) {             return d.category;           })(category_arcs);          var arc = d3.arc()           .outerradius(radius - 10)           .innerradius(0);          var labelarc = d3.arc()           .outerradius(radius - 10)           .innerradius(radius - 150);          var svg = d3.select("#pie")           .append("svg")           .attr("width", width)           .attr("height", height)           .append("g")           .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // moving center point. 1/2 width , 1/2 height          var g = svg.selectall("arc")           .data(category_arcs)           .enter().append("g")           .attr("class", "arc");          g.append("path")           .attr("d", arc)           .style("fill", function(d, i) {             return color[i];           });          g.append("text")           .attr("transform", function(d) {             return "translate(" + labelarc.centroid(d) + ")";           })           .text(function(d) {             return d.data.key + " = " + d.value;           })           .style("fill", "black");          g.append("text")           .attr("transform", "translate(" + (0 - (radius / 2)) + "," + (0 - radius + 10) + ")")           .text("count occurences of each category")           .style("fill", "black");        </script>

on line 305 have pie chart:

var svg = d3.select("#pie")

this overwrites svg you're using within change() function. need change pie_svg or unique name.


Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more