title: How to show D3 chart using Bootstrap modal popup when click on button and download it as image format
body: <p>I want to show d3 chart using bootstrap modal popup and download it as image format. </p>
  
  <p>I have tried using bootstrap modal but do not know how to use javascript function which is having D3 chart inside  bootstrap modal-body and how to download d3 chart as image format  </p>
  
  <p><strong>Sample code</strong></p>
  
  <pre><code>var path0  = [{x: 1.0, y: 8.5},{x: 2.0, y: 5.0}, {x: 1, y: 1.5}];
    var path1 = [{x: 3, y: 8.5},{x: 4.0, y: 5.0}, {x: 3, y: 1.5}];
    var path2 = [{x: 5, y: 8.5},{x: 6.0, y: 5.0}, {x: 5, y: 1.5}];
    var path3 = [{x: 7, y: 8.5},{x: 8.0, y: 5.0}, {x: 7, y: 1.5}]; 
    var path4  = [{x: 1.78, y: 5.0},{x: 1.8, y: 5.0}];
    console.log(path0);
  
    var w = 1200,
        h = 850,
        p = 40,
  
        x = d3.scale.linear().domain([0, 10]).range([p, w - p]),
        y = d3.scale.linear().domain([0, 10]).range([h - p, p]);
  
  
  
    var line = d3.svg.line()
              .interpolate("cardinal")
              .x(function(d) { console.log(d);return x(d.x); })
              .y(function(d) { console.log(d); return y(d.y); });
  
  
  
    var vis = d3.select("body").append("svg:svg")
              .attr("width", w)
              .attr("height", h)
              .append("svg:g"); 
  
    var rules = vis.selectAll("g.rule")
                .data(x.ticks(10))
                .enter().append("svg:g")
                .attr("class", "rule"); 
  
    rules.append("svg:line")
          .attr("x1", x)
          .attr("x2", x)
          .attr("y1", p)
          .attr("y2", h - p - 1);
  
    rules.append("svg:line")
          .attr("class", function(d) { return d ? null : "axis"; })
          .attr("y1", y)
          .attr("y2", y)
          .attr("x1", p)
          .attr("x2", w - p + 1);
  
    rules.append("svg:text")
          .attr("x", x)
          .attr("y", h - p + 3)
          .attr("dy", ".71em")
          .attr("text-anchor", "middle")
          .text(x.tickFormat(10));
  
    rules.append("svg:text")
          .attr("y", y)
          .attr("x", p - 3)
          .attr("dy", ".35em")
          .attr("text-anchor", "end")
          .text(y.tickFormat(10)); 
  
   vis.selectAll("path.path0")
        .data([0])
        .enter().append("svg:path")
        .attr("d", function(d) {  console.log(d);return line.tension(d)(path0); }) 
        .style("stroke","green");
        vis.append("text")
      .attr("x", (w / 2))             
      .attr("y", (h / 2))
      .attr("text-anchor", "middle")  
      .style("font-size", "16px") 
      .text("test2");        
  
    vis.append("text")
          .attr("y", 425)
          .attr("x",241.6)
          .attr("dy", 10)
          .attr("text-anchor", "middle")
          .text("test1"); 
  
  
          vis.append("text")
          .attr("y",4)
          .attr("x",5)
          .attr("dx", 15)
          .attr("dy",15)
          .attr("text-anchor", "middle")
          .text("test"); 
  
  
  
  
    vis.selectAll("path.path1")
        .data([0])
        .enter().append("svg:path")
        .attr("d", function(d) {  console.log(d);return line.tension(d)(path1); })
        .style("stroke","green");
  </code></pre>
  
  <p>Here is my sample d3 chart <a href="http://jsfiddle.net/s2yn3b4p/" rel="nofollow">jsfiddle</a></p>