1 设置svg

svg = d3.select("#svg1");

这是我在页面上已经有这个元素了。也可以使用其他的方式。

2 设置attribute

d3.js添加attribute使用的是attr(name, value)方法，这个方法适用于设置画布高度、设置元素坐标等

1）设置高度，宽度

可应用于画布和图中的各个元素宽高

svg.attr("width", width)                //设定宽度

.attr("height", height);        //设定高度

2）设置坐标 （x，y）：

svg.selectAll('g').data(dataset)
		  .enter()
		  .append("g")
		  .append("rect")
.attr("x",function(d,i){//每个矩形的起始x坐标
				var x = parseInt(d['x']);
				return x.toString();
		  })//每个矩形的起始x坐标
		.attr("y",function(d,i){//每个矩形的起始y坐标
				var y = parseInt(d['y']);
				y = -1 * y; // 注意d3的象限，如果不将y坐标取反，有可能图跟你想要的是上下翻转的。
				return y.toString();
		  })

3. 设置内联样式

内联样式的设置使用函数style(name, value)。适用于画布背景颜色、元素填充颜色、边框宽度和颜色等等。

应该凡是可以写进内联样式的样式，都可以这么添加吧。

举几个例子：

1）设置边框宽度和颜色：

          .style("storke-width", "0.2") //宽度
          .style("stroke","#bababa")//颜色

2）设置填充颜色：

.style("fill",function(d){
                   return  d['color'];
          })