如何使用D3中的轴进行预期转换

时间:2016-02-02 23:15:06

标签: d3.js

所有

我对D3转换很新,我想知道在切换数据时怎么才能在轴刻度线上应用长度转换?

我的代码就像:



var data1 = [1,2,3,4]
var data2 = [1,4,8,12]

function draw(data){

	var svg = d3.select(".chart svg");
	if(svg.empty()){
		svg = d3.select(".chart")
				.append("svg");
		svg.append("g")
		.classed("yaxis", true)
	}
	svg.attr("width", 400)
				.attr("height", 300);
	var axisg = svg.select("g.yaxis")
		.attr("transform", function(){
			return "translate(40, 20)";
		})
	var scale = d3.scale.linear();
	scale.domain(d3.extent(data)).range([300-40, 0]);
	var axis = d3.svg.axis();
	axis.scale(scale).orient("left")/*.ticks(5)*/;
	axisg.transition().duration(1500).ease("sin-in-out").call(axis)
	.selectAll("line")
			.attr("x2", 300-40)
			.style("stroke", "black")
			.style("stroke-width", "1px");
	axisg.select("path").style("fill", "none")

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button onclick="draw(data1)">Data1</button>
<button onclick="draw(data2)">Data2</button>

<div class="chart"></div>
&#13;
&#13;
&#13;

0 个答案:

没有答案