CODEWITHSUNDEEP
javascriptd3.js
yan zhang
yan zhang

Reputation: 23

Multiple d3 charts in the same row

The code below draws 1 pie chart and a legend on the left side of the screen. Right now, I am trying to draw another pie chart with legend right next to the one on the left (same row). I've tried using multiple divs in the html to make this work, but I want a more pure d3 solution in which the duplication happens in the d3 code rather than in the html or css. 

        var w = 200;
        var h = 200;
        var r = h / 2;
        var color = d3.scale.category20c();

        var vis = d3.select(divId).append("svg:svg").data([descArray]).attr("width",w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");

        var pie = d3.layout.pie().value(function (d, i) {
            return countArray[i];
        });

     // declare an arc generator function
        var arc = d3.svg.arc().outerRadius(r);

        // select paths, use arc generator to draw
        var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class",                     "slice");

        arcs.append("svg:path")
             .on("click", function(d) {//clicking on individual arcs 
                arcs.selectAll("path").style("opacity", 1);//resets all arcs' opacity to 1
                d3.select(this).style("opacity", 0.5);//sets clicked arc's opacity down
                alert(d.data + " " + d.value);
            })

            .style("fill", function(d,i) { return color(i); })
            .transition().delay(function(d, i) { return i * 100; }).duration(1000)
              .attrTween('d', function(d) {
                   var i = d3.interpolate(d.startAngle+0.7, d.endAngle);
                   return function(t) {
                       d.endAngle = i(t);
                     return arc(d);
                   }
              })
            .attr("fill", function (d, i) {
                return color(i);
            });


        var legend = d3.select(divId).append("svg")
          .attr("class", "legend")
          .attr("width", r * 4)
          .attr("height", r * 4)
        .selectAll("g")
          .data(color.domain().slice().reverse())
        .enter().append("g")
          .attr("transform", function(d, i) { return "translate(230," + i * 27 + ")"; });



      legend.append("rect")
          .on("click", function(d) {
                alert(d.data + " " + d.value);
          })
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", function (d, i) {
                return color(i);
            })

Upvotes: 0

Views: 1038

Answers (1)

rekoDolph
rekoDolph

Reputation: 823

put them in seperate divs but in the same SVG element

Presuming vis is your svgElement:

var firstChart = vis.append(div). // then put your first chart here
var secondChart = vis.append(div). // then put your second chart here

Upvotes: 1

Related Questions