相关文章推荐
坐怀不乱的山羊  ·  如何在Python中把文件写入内存文件路径并 ...·  1 年前    · 
幸福的眼镜  ·  AttributeError: ...·  1 年前    · 
飞奔的铁板烧  ·  ヴイエムウェアのクラウドサービス「VMwar ...·  1 年前    · 
飞翔的感冒药  ·  混合您的数据 - Tableau·  1 年前    · 
闯红灯的馒头  ·  typescript中，对象使用动态变量作为 ...·  1 年前    · 
小百科  ›  【d3js】导出各种格式得图片
png 数据可视化 svg d3js
有胆有识的豆腐
1 年前
function onDownload(data, type, name) { const blob = new Blob([data], { type }); // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。 const url = window.URL.createObjectURL(blob); //创建一个url const link = document.createElement('a'); //创建一个a标签 link.href = url; // 把url 赋值给a标签的href link.style.display = 'none'; // 不显示a link.setAttribute('download', name); document.body.appendChild(link); link.click(); // 触发a标签的点击事件 URL.revokeObjectURL(url); // 清除Url document.body.removeChild(link);

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

准备基础的图形绘制

准备基础的图形绘制，绘制出来几个小方块（不了解的可以往前面几篇文章翻翻） 

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      width: 500px;
      margin: 50px auto 0;
  </style>
</head>
  <div id="container">
  </div>
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
  const width = 500;
  const height = 500;
  const svg = d3.select('#container')
    .append('svg')
    .attr('width', width)
    .attr('height', width);
  const container = svg.append('g');
  const data = [
    { id: 1, fill: 'black', x: 10, y: 10 },
    { id: 2, fill: 'black', x: 50, y: 50 },
    { id: 3, fill: 'black', x: 100, y: 70 },
    { id: 4, fill: 'black', x: 20, y: 100 }
  draw(); // 绘制
  function draw() {
    const update = container.selectAll('rect')
      .data(data, d => d.id);
    //修改层
    update.attr('x', (d, idx) => d.x)
      .attr('y', (d, idx) => d.y)
      .attr('fill', (d) => d.fill)
    //渲染层
    const enter = update.enter();
    //删除层
    const exit = update.exit();
    enter.append('rect')
      .attr('width', 20)
      .attr('height', 20)
      .attr('id', d => d.id)
      .attr('x', (d, idx) => d.x)
      .attr('y', (d, idx) => d.y)
      .attr('fill', (d) => d.fill)
      .attr('stroke', 'blue')
      .attr('strokeWidth', 1)
    exit.remove()
</script>

导出svg图片


用d3js绘制的svg导出后缀名是.svg的, 需要怎么做呢？


使用XMLSerializer的serializeToString()方法返回 DOM 子树序列化后的字符串。
用法示例（MDN)：


//这里新建了一个 XMLSerializer 对象实例，然后将待序列化的 Document 对象实例传入返回等价 XML 的 serializeToString() (en-US) 方法。
 var s = new XMLSerializer();
 var d = document;
 var str = s.serializeToString(d);
 saveXML(str);

咱们也只需要把svg放进serializeToString是不是就行了呢？
代码如下：


 function onDownload(data, type, name) {
    const blob = new Blob([data], { type }); // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
    const url = window.URL.createObjectURL(blob); //创建一个url
    const link = document.createElement('a'); //创建一个a标签
    link.href = url; // 把url 赋值给a标签的href
    link.style.display = 'none';
    link.setAttribute('download', name);
    document.body.appendChild(link);
    link.click(); // 触发a标签的点击事件
    URL.revokeObjectURL(url); // 清除Url
    document.body.removeChild(link);
  function onSaveSvg() { // 保存svg
    const svg = document.querySelector('svg');
    const source = new XMLSerializer().serializeToString(svg); //将整个SVG document 对象序列化为一个 XML 字符串。
    onDownload(source, 'text/xml', 'test.svg'); // 下载 

效果图如下：


解释下为啥type类型会传text/xml


SVG 是使用 XML 来描述二维图形和绘图程序的语言。


导出除了svg外的格式


.svg导出可以看到还是蛮省劲的, 那么非.svg得格式图片该怎么导出？ 可以不可以使用相同得方法呢？显然是不可以得，咱们借助canvas得toDataURL进行导出。


文件类型 常见MIME 类型列表 developer.mozilla.org/zh-CN/docs/…


// 获取设备的devicePixelRatio
  function getPixelRatio(context) {
    const backingStore = context.backingStorePixelRatio
      || context.webkitBackingStorePixelRatio
      || context.mozBackingStorePixelRatio
      || context.msBackingStorePixelRatio
      || context.oBackingStorePixelRatio
      || context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;
  function onSavePng() { // 保存png
    const svgDom = document.querySelector('svg');
    const format = 'png'
    const svgString = new XMLSerializer().serializeToString(svgDom);
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const ratio = getPixelRatio(ctx); // 获取设备的devicePixelRatio
    const w = window.innerWidth; // 获取设备的显示屏幕宽高
    const h = window.innerHeight; // 图片加载完this.height才大于0.
    const ratioW = canvas.width || w * ratio; // 计算屏幕的高清图片的宽高，同时设置画板的像素
    const ratioH = canvas.height || h * ratio;
    const domURL = this.URL || this.webkitURL || this;
    const img = new Image(ratioW, ratioH);
    const svg = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
    const url = domURL.createObjectURL(svg);
    img.src = url;
    img.onload = function on() {
      ctx.drawImage(img, 0, 0);
      const png = canvas.toDataURL(`image/${format}`);
      domURL.revokeObjectURL(png);
      const a = document.createElement('a');
      a.setAttribute('download', `test.${format}`);
      a.setAttribute('href', png);
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      a.remove();

包含导出svg、png、jpg


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      width: 500px;
      margin: 50px auto 0;
  </style>
</head>
  <div id="container">
    <button onclick="onSaveSvg()"> 保存svg图片 </button>
    <button onclick="onSaveImage('png')"> 保存png图片 </button>
    <button onclick="onSaveImage('jpg')"> 保存jpg图片 </button>
  </div>
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
  const width = 500;
  const height = 500;
  const svg = d3.select('#container')
    .append('svg')
    .attr('width', width)
    .attr('height', width);
  const container = svg.append('g');
  const data = [
    { id: 1, fill: 'black', x: 10, y: 10 },
    { id: 2, fill: 'black', x: 50, y: 50 },
    { id: 3, fill: 'black', x: 100, y: 70 },
    { id: 4, fill: 'black', x: 20, y: 100 }
  draw(); // 绘制
  function draw() {
    const update = container.selectAll('rect')
      .data(data, d => d.id);
    //修改层
    update.attr('x', (d, idx) => d.x)
      .attr('y', (d, idx) => d.y)
      .attr('fill', (d) => d.fill)
    //渲染层
    const enter = update.enter();
    //删除层
    const exit = update.exit();
    enter.append('rect')
      .attr('width', 20)
      .attr('height', 20)
      .attr('id', d => d.id)
      .attr('x', (d, idx) => d.x)
      .attr('y', (d, idx) => d.y)
      .attr('fill', (d) => d.fill)
      .attr('stroke', 'blue')
      .attr('strokeWidth', 1)
    exit.remove()
  function onDownload(data, type, name) {
    const blob = new Blob([data], { type }); // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
    const url = window.URL.createObjectURL(blob); //创建一个url
    const link = document.createElement('a'); //创建一个a标签
    link.href = url; // 把url 赋值给a标签的href
    link.style.display = 'none';
    link.setAttribute('download', name);
    document.body.appendChild(link);
    link.click(); // 触发a标签的点击事件
    URL.revokeObjectURL(url); // 清除Url
    document.body.removeChild(link);
  function onSaveSvg() { // 保存svg
    const svg = document.querySelector('svg');
    const source = new XMLSerializer().serializeToString(svg); //将整个SVG document 对象序列化为一个 XML 字符串。
    onDownload(source, 'text/xml', 'test.svg'); // 下载 
  // 获取设备的devicePixelRatio
  function getPixelRatio(context) {
    const backingStore = context.backingStorePixelRatio
      || context.webkitBackingStorePixelRatio
      || context.mozBackingStorePixelRatio
      || context.msBackingStorePixelRatio
      || context.oBackingStorePixelRatio
      || context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;
  function onSaveImage(format) { // 保存png
    const svgDom = document.querySelector('svg');
    const svgString = new XMLSerializer().serializeToString(svgDom);
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const ratio = getPixelRatio(ctx); // 获取设备的devicePixelRatio
    const w = window.innerWidth; // 获取设备的显示屏幕宽高
    const h = window.innerHeight; // 图片加载完this.height才大于0.
    const ratioW = canvas.width || w * ratio; // 计算屏幕的高清图片的宽高，同时设置画板的像素
    const ratioH = canvas.height || h * ratio;
    const domURL = this.URL || this.webkitURL || this;
    const img = new Image(ratioW, ratioH);
    const svg = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
    const url = domURL.createObjectURL(svg);
    img.src = url;
    img.onload = function on() {
      ctx.drawImage(img, 0, 0);
      const png = canvas.toDataURL(`image/${format}`);
      domURL.revokeObjectURL(png);
      const a = document.createElement('a');
      a.setAttribute('download', `test.${format}`);
      a.setAttribute('href', png);
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      a.remove();
</script>

通过这篇文章, 相信尼对导出有了一个新得认识。

        BigYe程普
        React.js
        d3.js
       
   从零开始学D3js：在react中搭建d3力导向图




    

 
是一个能够制作精美、复杂图表的数据可视化库。 是一个由数据驱动的数据可视化库，要把数据绑定到DOM上，然后才能展示。 是一个基于Html、CSS、svg/canvas的js数据可视化库。 能够拖拽。 整个图都将在div里绘制。 在【完整代码】中已经构造了节点和连线，但那是基于后…
 
  •  1.0w
    •  
 
   数据可视化 D3.js 简介
 
这是我在学习数据可视化时做的笔记，这一系列的文章主要涉及的是数据可视化在前端的技术，包括 HTML、CSS、JavaScript，其中主要使用 SVG 和 D3.js 框架。
 
  •  1.0w
    •  
 
   D3.js 漫游指南
 
学习D3.js的旅途中看到的风景十分美妙, 壮丽 有时甚至有些崎岖. 你可能会被d3.js文档长长的function列表所吓到(d3’s API documentation ), 或者被成堆的教程弄的疲惫不堪( dozens of tutorials). 这里有超过两万个例子你…
 
  •  5330
    •  
 
   D3.js上手——折线图
 
折线图是数据统计中经常会用到的图表，用于二维数据的展示，本文将使用D3上手制作一个简单的折线图确定数据表格数据是一家店铺一年的销售量月份销售量(件)1月4542月6283月7564月6325月5826
 
  •  5612
    •  
 
   利用D3.js实现思维导图
 
由于公司需求，所以需要做数据可视化。看了很多库，觉的D3.js库很强大，于是决定用D3.js库。 在使用树状图时，看到固定的树形图，在想能不能做了思维导图了，于是便开始了探索。。。
 
  •  7087
    •  
 
   基于 D3.js 绘制动态进度条
 
我们经常使用svg或canvas来实现动态图形的绘制，但绘制过程相对较繁琐。对于直观漂亮的进度条，社区也有提供成熟的方案例如highcharts/ECharts等等，但基于配置的开发方式终究无法实现100%的自定义绘制。本文将带你使用D3.js从零一步一步实现动态进度条，并分享…




    

 
  •  8805
    •  
 
   【d3js】 d3js 比例尺
 
这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战 前言 大家通过之前一篇小demo沿着圆运动动画, 可能会对d3js产生了兴趣, 接下来咱们继续学习他的常用api, 针对这些api 我会输
 
  •  1022
    •  
 
   D3.js + Canvas 绘制组织结构图
 
上面的demo就是使用 D3.js + Canvas 的方式实现的, 在组织的层数超过300时才会出现明显的卡顿, 能满足大部分的组织结构图的数据. 上面的变量 nodes 和 links 现在就包含了结构图中每个 组织节点 和 连接线 的坐标信息. 2. 使用Canvas绘图…
 
  •  9137
    •  
 
   「数据可视化库王者」D3.js 极速上手到Vue应用
 
D3与众多其他库的区别在于无限定制的能力（直接操作SVG）。 它的底层API提供对原生SVG元素的直接控制，但它也带来了高学习曲线的成本。 我们将把D3和Vue结合在一起 - 使用Vue的动态数据绑定，清晰的语法和模块化结构，可以充分发挥D3的最佳性能。 绝大部分的D3课程或书…
 
  •  2.5w
    •  
 
   D3.js值得学习吗？
 
如果你关注前端数据可视化，那你一定听说过d3.js。为了快速开发，我们通常会选择简单易用的图表库。那么，D3.js还有必要学习吗？
 
  •  6111
    •  
 
   D3.js上手——饼状图
 
布局是D3中非常重要的内容，有了布局D3才能画出复杂的矢量图。但布局并不是直接绘制图形，只是将初始数据转换成容易画图的图形语言，画图工具能读懂图形语言来进行绘制。 在绘制饼状图中，例如有一组数据[1, 2, 3]，只依靠这些数据是画不出的，需要将这些数据转化为圆形的起始角度和终…
 
  •  3590
    •  
 
   D3.js学习笔记 — 入门教程
 
D3.js入门教程 本教程的目的在于提供一个简单易懂的入门教程。 D3.js简介 D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，
 
  •  8629
    •  
 
   D3可视化：（2）Bar Chart with D3js
 
拖更了好久，最近毕业的手续办的差不多了，应该可以回来了... 更新中... 数据可视化的第一步还是数据读取，在d3中可以使用d3.csv非常方便的读取数据，它会返回一个Promise对象。 将数据绑定到DOM上，是D3最大的特色。d3.select与d3.selectAll返回…
 
  •  3782
    •  
 
   初识 D3.js ：打造专属可视化
 
一、前言随着现在自定义可视化的需求日益增长，Highcharts、echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了，这个时候D3的无限定制的能力就脱颖而出。如果想要通过D
 
  •  6834
    •  
 
   【D3.js 入门系列一】从零开始绘制一个柱形图
 
D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。 D3 提供了各种简单易用的函数，大大简化了 JavaScript 操…
 
  •  1.5w
    •   
    •  
 【D3.js 入门系列一】从零开始绘制一个柱形图
    
友情链接：
 
 
  
私信
 
推荐文章
坐怀不乱的山羊  ·  如何在Python中把文件写入内存文件路径并从内存文件路径读取？
1 年前
幸福的眼镜  ·  AttributeError: module ‘torch‘ has no attribute ‘device‘ 错误处理办法_墨理学AI的博客-CSDN博客
1 年前
飞奔的铁板烧  ·  ヴイエムウェアのクラウドサービス「VMware vCloud Air」はどう使われているか：日本DC開設から1年 - ＠IT
1 年前
飞翔的感冒药  ·  混合您的数据 - Tableau
1 年前
闯红灯的馒头  ·  typescript中，对象使用动态变量作为key获取相应的值时类型声明_ts 动态key_我有一棵树的博客-CSDN博客
1 年前
Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
小百科 - 百科知识指南