将上面的绘制的代码放在html文件中 让我打开html文件直接能看到绘制的图形
时间: 2024-03-19 21:45:10 浏览: 61
当然可以,下面是一个将上面的代码放在HTML文件中的例子,你可以将代码复制粘贴到HTML文件中,然后使用浏览器打开该文件来查看绘制的甘特图。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>D3甘特图</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
// 数据,包括任务名称、开始时间、结束时间、任务颜色等信息
const data = [
{ name: '任务1', start: '2021-01-01', end: '2021-01-05', color: '#FFC107' },
{ name: '任务2', start: '2021-01-06', end: '2021-01-10', color: '#4CAF50' },
{ name: '任务3', start: '2021-01-11', end: '2021-01-15', color: '#2196F3' },
{ name: '任务4', start: '2021-01-16', end: '2021-01-20', color: '#9C27B0' },
{ name: '任务5', start: '2021-01-21', end: '2021-01-25', color: '#F44336' }
];
// SVG画布大小
const width = 600;
const height = 200;
// 在body中添加SVG画布
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
// 甘特图的横向比例尺,用于将时间转换为像素位置
const xScale = d3.scaleTime()
.domain([new Date('2021-01-01'), new Date('2021-01-25')])
.range([0, width]);
// 甘特图的纵向比例尺,用于将任务转换为像素位置
const yScale = d3.scaleBand()
.domain(data.map(d => d.name))
.range([0, height]);
// 绘制甘特图的条形块
const gantt = svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', d => xScale(new Date(d.start)))
.attr('y', d => yScale(d.name))
.attr('width', d => xScale(new Date(d.end)) - xScale(new Date(d.start)))
.attr('height', yScale.bandwidth())
.attr('fill', d => d.color);
// 绘制甘特图的时间轴
const xAxis = d3.axisBottom(xScale);
svg.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
</script>
</body>
</html>
```
你可以将代码保存为一个HTML文件,然后使用浏览器打开该文件,就可以看到绘制的甘特图了。