01-入门篇
2020-08-20 本文已影响0人
安检被捏丸子头
话不多说先上案例
使用在线的D3.js
<script src="https://d3js.org/d3.v5.min.js"></script>
用数据驱动，绘制一个柱状图
<body>
<svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
<script>
const data = [{name: 'Shao', value: 6}, {name: 'Wen', value: 6},
{name: 'Cai', value: 16}, {name: 'Liang', value: 14},
{name: 'Yuan', value: 6}, {name: 'Rui', value: 10},
{name: 'Dong', value: 13}, {name: 'He', value: 20},
{name: 'Xiang', value: 12}, {name: 'Godness', value: 11},
{name: 'Wei', value: 15}, {name: 'Chen', value: 14},
{name: 'Yu', value: 15}, {name: 'Li', value: 18}, ];
// data1在更换数据的时候使用
const data1 = [{name: 'Tian', value: 11}, {name: 'Wen', value: 13},
{name: 'Cai', value: 16}, {name: 'Gou', value: 14},
{name: 'Zha', value: 14}, {name: 'Rui', value: 10},
{name: 'Dong', value: 13}, {name: 'He', value: 20},
{name: 'Xiang', value: 8}, {name: 'Godness', value: 11},
{name: 'Wei', value: 15}, {name: 'Chen', value: 14},
{name: 'Yu', value: 15}, {name: 'Li', value: 18}, ];
const svg = d3.select('#mainsvg');
const widht = +svg.attr('width'); // 获取一个参数的属性'+'
const height = +svg.attr('height');
const margin = {top: 60, right: 30, bottom: 60, left: 50};
const innerWidth = widht - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// 横轴比例尺
const xScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([0, innerWidth]);
const yScale = d3.scaleBand()
.domain( data.map( d => d.name) ) // 离散的坐标系
.range([0, innerHeight])
.padding(0.2);
// 定义坐标轴的组
const g = svg.append('g').attr('id', 'maingroup')
.attr('transform', 'translate(100, 50)');
const yAxis = d3.axisLeft(yScale);
g.append('g').call(yAxis);
const xAxis = d3.axisBottom(xScale);
g.append('g').call(xAxis).attr('transform', 'translate(0, '+innerHeight+')');
// 数据驱动
data.forEach( d => {
g.append('rect')
.attr('width', xScale(d.value))
.attr('height', yScale.bandwidth())
.attr('fill', 'green')
.attr('y', yScale(d.name))
});
// 选择器 调节每一个刻度
d3.selectAll('.tick text').attr('font-size', '2em');
// 添加标题
g.append('text').text('title')
.attr('font-size', '3em')
.attr('transform', 'translate('+innerWidth / 2+', 0)')
.attr('text-anchor', 'middle');
</script>
</body>
以上代码的效果图
更新数据的代码
d3.selectAll('rect').data(data1).attr('width', d => xScale(d.value));
效果图如下
使用data1绘制图表
