安装参考:NodeJS+Vue+Element-Ui/Plus+Axios+Vue-router+vuex 详细下载、安装、创建项目、引入_书启秋枫的博客-CSDN博客
1.nodejs安装及npm下载
nodejs是什么?nodejs是一个事件驱动I/O服务端JavaScript环境,目的是前后端完全分离。
Binary要解压到node_modules文件夹中。
2.调试Server.js
var http=require("http");
http.createServer(function(request,response){
//发送HTTP头部
//HTTP状态值:200:OK
//内容类型:text/plain
response.writeHead(200,{'Content-Type':'text/plain'});
//response.write('Hello World\n');
//发送响应数据 Hello World
response.end('Hello World\n');
}).listen(8888);
//终端打印
console.log('Server running at http://127.0.0.1:8888/');
在终端中,用 node server.js 启动,在终端和网页中显示如下:
终端:
网页:
3.Vue安装
Vue是什么?Vue是一个新型前端构建工具,主要有两部分:一个开发服务器,和一套构建指令。
- npm install vue ——安装vite包
- npm init vite-app hellovue ——创造工程
- npm run dev ——运行
4.创建一个Vue+D3随机数直方图项目
用yarn构建项目:从 Vite 与 Vue 开始的 D3 数据可视化之旅 - 云游君的小站
配色方案:D3 配色方案篇_d3 颜色_BBEter的博客-CSDN博客
参考线及坐标轴:D3学习篇-直方图_d3直方图_ly2230976595的博客-CSDN博客
<template>
<h2><a href="https://d3js.org" target="_blank">随机数直方图</a></h2>
<div id="barchart-container"></div>
</template>
<script>
import { defineComponent } from 'vue';
import * as d3 from "d3";
var data=new Array(20);
var data_x=new Array(20);
for (var i=0;i<20;i++)
{
data[i]=Math.floor(Math.random()*255);
data_x[i]=i+1;
console.log(data_x[i]+":"+data[i]);
}
var color=d3.schemePastel2;
export default defineComponent({
mounted() {
this.drawBarChart(data);
},
methods:{
drawBarChart(data){
var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
w=w*0.6;
h=h*0.5;
//x轴宽度
var xAxisWidth = 400;
//y轴宽度
var yAxisWidth = 300;
var padding = { top: 30 , right: 30, bottom: 30, left: 30 };
//x轴比例尺
var xScale = d3.scaleBand()
.domain(d3.range(data_x.length))
.range([0,w-padding.right]);
//y轴比例尺
var yScale = d3.scaleLinear()
.domain([0,d3.max(data)])
.range([0,yAxisWidth]);
var svg=d3.select("#barchart-container")
.append("svg")
.attr("width",w)
.attr("height",h);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("fill",(d,i)=>color[i%8])
.attr("x",function(d,i){
return padding.left + + xScale(i);
})
.attr("y",function(d,i){
return h-padding.bottom-data[i];
})
.attr("height",d=>d)
.attr("width",xScale.bandwidth());
// //draw axios
var xAxis = d3.axisBottom(xScale);
yScale.range([h,0]);
var yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (h - padding.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (h - padding.bottom - h) + ")")
.call(yAxis);
}
}
})
</script>
最后效果: