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