javascript - 单击按钮并将其下载为图像格式时，如何使用Bootstrap模态弹出窗口显示D3图表

我想使用引导程序模式弹出窗口显示d3图表，并将其下载为图像格式。

我尝试过使用引导模态，但是不知道如何使用javascript函数，该函数在引导模态体内包含D3图表，以及如何将d3图表下载为图像格式

样例代码

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");

这是我的样本d3图表jsfiddle

最佳答案

好吧，我知道了。您只需要更改JavaScript文件的第24行即可：

var vis = d3.select("#yourDivID").append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .append("svg:g");

而不是针对“身体”。这样，它将使用指定的ID写入div，您可以放置​​：

<div id="yourDivID"></div>

无论您需要在何处放置SVG图片（即在您的模式主体标签中），都可以将其放入HTML文件。

这是我对小提琴的更新，我已将其写入div：jsfiddle

您可能需要更新宽度和高度以使其适合模态，否则您可以通过CSS定位svg，使其响应方式与常规图像相同。