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

How to show D3 chart using Bootstrap modal popup when click on button and download it as image format

本文关键字：模式 何使用 图表 D3 显示 窗口 按钮 下载 格式 图像 单击      更新时间：2023-09-26

我想使用引导模式弹出窗口显示 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>

放入 HTML 文件中，无论您需要放置 SVG 图像的任何位置（即在您的模态正文标签中）。

这是我对你的小提琴的更新，我让它写到div：jsfiddle

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

您的代码已经在创建 svg 图像，因此您只需要放置它。

我在单独的 HMTL 页面中创建了一个图表，就像您已经做过的那样，然后在我的 JavaScript 文件中定位了一个特定的 ID，以便在我想在另一个 HTML 页面中显示它时附加到它。为此，请在代码末尾添加以下内容：

var baseSvg = d3.select("#yourDivID").append("svg");

然后在要显示它的页面中，添加一个指向 d3 的链接.js以及您用于创建图表的 JavaScript 文件，然后在您的模态正文div 中添加：

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

由于您的图表是特定大小，因此您可以相应地设置此div 或其父级的样式。

相关文章：