d3.js怎么样把图画水平居中
时间: 2024-02-01 15:16:04 浏览: 48
可以使用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怎么样把图表画在居中位置
要将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 把数组数据存入csv中
在D3.js中,你可以使用以下步骤将数组数据存入CSV文件:
1. 首先,将数据转换为CSV格式的字符串。你可以使用D3.js的`d3.csvFormat()`方法来实现这一点。这个方法接受一个对象数组作为参数,并返回一个包含CSV格式数据的字符串。
例如:
```javascript
var data = [
{ name: "John", age: 28, city: "New York" },
{ name: "Jane", age: 32, city: "San Francisco" },
{ name: "Bob", age: 45, city: "Chicago" }
];
var csvData = d3.csvFormat(data);
```
2. 接下来,创建一个包含CSV数据的Blob对象。你可以使用JavaScript的`new Blob()`方法来创建Blob对象。Blob对象是二进制数据的容器。
例如:
```javascript
var blob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });
```
3. 最后,使用浏览器的FileSaver库或其他方法将Blob对象保存为CSV文件。
例如,使用FileSaver库:
```javascript
saveAs(blob, "data.csv");
```
这样,你就可以将数组数据存入CSV文件了。