Question

我一直在寻找每个刻度之间的相等空间。

我们如何使用比例线性来获得每个刻度与不等间隔之间的相等空间。

我正在使用d3 verison 4。以下是摘录。

＆＃13;

var xCoordinates = [20, 25, 31.5, 40, 50, 63, 80,
		100, 125, 160, 200, 250, 315,
		400, 500, 630, 800, 1000, 1200,
		1600, 2000, 2500, 3200, 4000, 5000,
		6300, 8000, 10000, 12500, 16000, 20000];

var yCoordinates = [-18, -15, -12, -9, -6, -3, 0, 3, 6, 9, 12, 15, 18];

var margin = {top: 50, right: 50, bottom: 50, left: 50};
		var width = 900 - margin.left - margin.right;
		var height = 500 - margin.top - margin.bottom;

console.log(d3);

var xScale = d3.scaleLinear()
			.domain(d3.extent(xCoordinates))
			.rangeRound([0,width]);

		var yScale = d3.scaleLinear()
			.domain(d3.extent(yCoordinates))
			.range([height, 0]);

var svg = d3.select('.graph').append('svg')
			.attr('width', width + margin.left + margin.right)
			.attr('height', height + margin.top + margin.bottom)
			.append('g')
			.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

		var xAxis = svg.append('g')
			.attr('class', 'x-axis')
			.attr('transform', 'translate(0,' + height + ')')
			.call(d3.axisBottom(xScale)
				.ticks(10)
				.tickValues(xCoordinates)
				.tickPadding(5)
				.tickFormat(function(d){
					if(d===20){
						d = d+'Hz';
					}
					else if ((d / 1000) >= 1) {
						d = d / 1000 + "k";
					}
					return d;
				}));

		var yAxis = svg.append('g')
			.attr('class', 'y-axis')
			.call(d3.axisLeft(yScale)
				.tickValues(yCoordinates)
				.tickFormat(function(d) {
					if(d===0){
						d = d+'dB';
					}
					return d;
				}));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>
<div class="graph"></div>

＆＃13;

Answer 1

如果您的数据只有X值与xCoordinates中的值匹配，那么您可以使用scaleOrdinal。

但是，如果您的数据的X值介于xCoordinates中的值之间，并且您希望xScale在X轴上的点之间线性定位数据点，则必须：

将xScale.range的数组设置为与xCoordinates数组具有相同数量的值并且
xScale.range数组中的每个项目都是0到width之间的设置间隔。例如你的xCoordinates 31项，所以xScale.range数组中的每个值都是[（0 *（宽度/ 31）），（1 *（宽度/ 31）），（2 *（宽度/ 31））,. ..（30 *（宽度/ 31））]。您可以使用for循环或类似的

我们如何在d3 js中的线性比例的不等值的所有刻度之间建立相等的空间

1 个答案: