d3.js怎么样把图表画在居中位置
时间: 2023-12-23 13:04:02 浏览: 41
要将d3.js图表居中,可以使用CSS和d3.js的transform属性来实现。以下是一些示例代码:
HTML:
```html
<div id="myDiv"></div>
```
CSS:
```css
#myDiv {
width: 800px;
height: 600px;
margin: 0 auto;
}
```
JavaScript:
```javascript
var svg = d3.select("#myDiv")
.append("svg")
.attr("width", 800)
.attr("height", 600);
// 在这里绘制你的图表
svg.attr("transform", "translate(" + (800/2) + "," + (600/2) + ")");
```
在这个例子中,我们首先使用CSS将div元素居中。然后,在d3.js中创建一个SVG元素并在其中绘制图表。最后,使用transform属性将图表居中。transform属性中的translate()函数将图表移动到x和y坐标的中心点。在本例中,x坐标为800/2,即400,y坐标为600/2,即300。
相关问题
d3.js怎么样把图画水平居中
可以使用CSS的margin属性来实现水平居中,具体方法如下:
1. 给d3.js生成的SVG元素设置一个固定的宽度(比如800px);
2. 给SVG元素应用以下CSS样式:
```
svg {
margin: 0 auto;
display: block;
}
```
这样就可以实现将SVG图形水平居中了。其中,`margin: 0 auto;`表示将左右margin都设置为auto,从而实现水平居中。`display: block;`则是为了让SVG元素可以占据整个父元素的宽度。
d3.js在vue里画贝塞尔曲线实例
下面是一个使用d3.js在Vue中画贝塞尔曲线的示例:
1. 安装d3.js
使用npm安装d3.js:
```
npm install d3
```
2. 在Vue组件中导入d3.js
在Vue组件的`<script>`标签中导入d3.js:
```
import * as d3 from 'd3';
```
3. 在Vue组件中定义一个SVG元素
在Vue组件中定义一个SVG元素,用于绘制贝塞尔曲线:
```
<template>
<svg ref="svg"></svg>
</template>
```
4. 在Vue组件的mounted钩子函数中使用d3.js绘制贝塞尔曲线
在Vue组件的mounted钩子函数中使用d3.js绘制贝塞尔曲线:
```
<script>
export default {
mounted() {
const svg = d3.select(this.$refs.svg);
const width = 500;
const height = 500;
const controlPoints = [
[100, 100],
[200, 200],
[300, 300]
];
const line = d3.line()
.x(d => d[0])
.y(d => d[1]);
const curve = svg.append('path')
.attr('d', line(controlPoints))
.attr('stroke', 'black')
.attr('fill', 'none');
const drag = d3.drag()
.on('drag', () => {
const [x, y] = d3.event.subject;
const dx = d3.event.dx;
const dy = d3.event.dy;
d3.event.subject = [x + dx, y + dy];
controlPoints[d3.event.index] = [x + dx, y + dy];
curve.attr('d', line(controlPoints));
});
svg.selectAll('.control-point')
.data(controlPoints)
.enter()
.append('circle')
.attr('class', 'control-point')
.attr('cx', d => d[0])
.attr('cy', d => d[1])
.attr('r', 5)
.call(drag);
}
}
</script>
```
这段代码首先定义了一个SVG元素,然后使用d3.line()创建一条折线,再使用d3.drag()创建一个拖动事件,最后使用d3.selectAll()创建三个控制点。当拖动控制点时,它们的坐标会更新,然后使用d3.line()重新绘制贝塞尔曲线。
上面的代码可以画出一个简单的三次贝塞尔曲线,你可以根据自己的需求修改数据和样式。