d3 那点事儿

最新推荐文章于 2020-12-24 09:45:56 发布

weixin_34191845

最新推荐文章于 2020-12-24 09:45:56 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b6d0a4f5188251b176a95b9

------这篇文章将持续介绍 d3 的一些属性和方法 --------

1.d3.extent()

返回最小值和最大值的一个数组

d3.extent([1,2,3])         // [1,3]复制代码

2.onmouseover 事件获取 event 对象的 pageX pageY 在circle 旁边显示 text 文字

chrome，safari 正常显示，但是 firefox 获取不到 event is not defined

这里直接使用 d3.event 就可以了！！（ d3 简直太棒了！）

.on('mousemove', function (d, i) {
          return tooltip.style('top', (d3.event.pageY-10)+'px').style('left',(d3.event.pageX+10)+'px')
        })
复制代码

3.firefox 超出 svg 大小的 tick text ... 不显示

这里需要给 svg 设置一个属性：

.style('overflow', 'visible')复制代码

参考链接

4.导出 pdf 和 svg

这里注意一下：( 将 d3 的 svg 统一用 id="d3container" 的 div 包着 )

引入依赖

import * as html2canvas from 'html2canvas'
import * as jsPDF from 'jspdf'
复制代码

导出 pdf 此方法不识别 css 类名，如果想改 fill 或 stroke 建议在代码里直接改相应的 style

let that = this
      html2canvas(document.getElementById("d3container")).then(canvas => {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 10;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 592.28 / contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new jsPDF('', 'pt', 'a4');

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 10, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        pdf.save(data + '.pdf');
      });
复制代码

此方法 分辨率不是很高有待改进...

导出 svg

      var svg = document.getElementById(elementId);
      var svgElement = svg.getElementsByTagName("svg")[0]

      var svgData = (new XMLSerializer()).serializeToString(svgElement);
      var a = document.createElement('a');
      a.href = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData.replace(/></g, '>\n\r<'));
      a.download = '1.svg';

      //Hack alert: create a temporary link to download the svg
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
复制代码

link fill 参考链接

d3 demo参考链接

svg 参考链接

5.坐标轴 .nice()

有的时候我们会使用数组的最大值和最小值最为坐标轴的 domain ，这个时候可能会出现小数点，或者刻度并没有在两端显示，这样看起来很难看，所以我们使用 .nice() 进行规整显示

代码如下：

var yScale = d3.scaleLinear().domain([d3.min(sampleData) * 1.2,d3.max(sampleData) * 1.2]).range([400,0]).nice()
复制代码

参考链接

6.ticks()

平时我们使用 ticks(number) 时，发现有的时候并不会像我们预期那样去分段，这是为什么呢？其实，作者有写 ticks 的数值只能是 1，2，5，10 以及 10 的倍数！！！！如果是其他的数值，则会取1，2，5，10 以及 10 的倍数相近的数！！

所以我们在平时设置这几个数以外的值时，总是和我们预期相悖。

参考链接

7.scale.invert()

鼠标移到图上的某个位置，已知点在图中的坐标位置，如何转换成坐标上的值？

xScale.invert(d3.event.offsetX)  // 以 x 坐标为例
复制代码

参考链接

8.鼠标所在的坐标 d3.mouse(this)

let x = d3.mouse(this)[0]
let y = d3.mouse(this)[1]
复制代码

9.ES6 import 语法引入 d3-3d

import { _3d } from 'd3-3d'; 
d3._3d = _3d;复制代码

参考链接

10.比例尺 scaleBand ，获取每个 band 的 x0，x1 的值

x0: xScale(某个刻度值）
x1: xScale(某个刻度值) + xScale.bandwidth()复制代码

11.移除 brush

d3.select("g.brush").call(brush.extent([0, 0]))
复制代码

12.坐标轴 text 描述文字居中显示

.attr("transform", "translate("+ (width / 2) +", "+ height +")")
.attr("text-anchor", "middle")
复制代码

12.颜色渐变

1.下载依赖

npm install d3-scale-chromatic
复制代码

2.引入

import * as d3Chromatic from 'd3-scale-chromatic';
var color = d3.scaleSequential(d3Chromatic.interpolatePiYG);复制代码

文档地址

13.随机生成颜色

let color = '#'+Math.floor(Math.random() * Math.pow(2,32) ^ 0xffffff).toString(16).substr(-6);
console.log(color);复制代码

14.刷子 brush

let brush = d3.brush().extent([[刷子的范围起始坐标],[刷子的范围终点坐标]]).on("brush", brushing).on("end", brushend)
vg.append("g")
  .attr("class", "brush")
  .call(brush);
复制代码