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

Question

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

我尝试过使用 bootstrap modal 但不知道如何使用在 bootstrap modal-body 中包含 D3 图表的 javascript 函数以及如何将 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

Answer 1

好吧，我明白了。您只需将 JavaScript 文件的第 24 行更改为:

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

而不是针对“ body ”。这样它会写入具有指定 ID 的 div，您可以放置​​:

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

在您的 HTML 文件中您需要放置 SVG 图像的地方(即在您的模态正文标签内)。

这是我对你的 fiddle 的更新，我已经把它写入了 div:jsfiddle

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