要做一个基础火山图，需求如图：
前端用vue 数据端用node对本地文件进行读操作将文件内容传给前端：
首先在项目中引入d3：
npm install --save d3@4.7.1复制代码在需要用到d3的.vue文件下引入：
import * as d3 from 'd3' 复制代码html代码如下：
"canvas">
复制代码下面咱开始画图啦！
1. 在div下创建个svg
let width = 600 let height = 400 let padding = {left: 30, right: 30, top: 30, bottom: 30} let svg = d3.select('#canvas') .append('svg') .attr('id', 'svg') .attr('width', width) .attr('height', height)复制代码2. 创建一个线性比例尺
let xScale = d3.scaleLinear() .domain([-4, 4]) // 范围可以自定义，也可以按照d[0]的最大值去设置 .range([0, width - padding.left - padding.right]) let yScale = d3.scaleLinear() .domain([0, 12]) .range([height - padding.top - padding.bottom, 0]) 复制代码3. 画 x y 轴 以及 各个点
let tooltip = d3.select('body') // 鼠标移动到某个点 显示 name .append('div') .style('position', 'absolute') .style('z-index', '10') .style('color', '#3497db') .style('visibility', 'hidden') // 控制显示隐藏 .style('font-size', '12px') .style('font-weight', 'bold') .text('') let circles = svg.selectAll('circle') .data(self.arr) .enter() .append('circle') .attr('cx', (d) => { return padding.left + xScale(d[0]) }) .attr('cy', (d) => { return padding.bottom + yScale(d[1]) }) .attr('r', self.radius) .on('mouseover', function (d, i) { return tooltip.style('visibility', 'visible').text(d[2]) }) .on('mousemove', function (d, i) { return tooltip.style('top', (event.pageY-10)+'px').style('left',(event.pageX+10)+'px') }) .on('mouseout', function (d, i) { return tooltip.style('visibility', 'hidden') }) let xAxis = d3.axisBottom() .scale(xScale) let yAxis = d3.axisLeft() .scale(yScale) svg.append('g') .attr('class', 'axis') .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')') .call(xAxis) // .append('text') // x轴文字描述 // .text('Log2FoldChange') // .attr('stroke', '#') // 加上stroke属性 才能在画布上显示 // .attr('transform', 'translate('+ width/2.2 + ', 28)') svg.append('g') .attr('class', 'axis') .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')') .call(yAxis) 复制代码4.让部分的点显示text
svg.selectAll('text') .data(this.arr) .enter() .append('text') .filter((d) => { return d[1] > 9 && d[0] < 0 }) .text((d) => { return d[2] }) .attr('x', (d) => { return padding.left + xScale(d[0]) }) .attr('y', (d) => { return padding.bottom + yScale(d[1]) }) .attr('fill', '#3497db') 复制代码5.改变部分的点的颜色
let self = this let svg = d3.selectAll('circle') .classed('green', (d, i) => { return d[0] < -self.xLeft && d[1] > self.yTop }) .classed('red', (d, i) => { return d[0] > self.xLeft && d[1] > self.yTop }) 复制代码版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/177050.html原文链接：https://javaforall.net
