javascript - 折线图的 x 坐标缩放

Question

我想知道如何让x坐标从0开始。

    var valueline = d3.svg.line()
        .x(function(d, i){
            console.log(x(d)); //outputs 280.14285714285717 , 530, 378.57142857142856
            return x(d)
        })
        .y(function(d){
            return y(d)
        })

您可以在注释中看到控制台在第一个输出中不输出 0，而是输出 280.14285714285717。

这是我的 x 变量 var x = d3.scale.linear().domain([0,d3.max(d3.values(arr))]).range([0, width]);我是 d3 的新手，但我认为这会将我所有的输入从 0 开始到 arr 的最大 el数组并将其从 0 缩放到我在变量中分配的 svg 的宽度，如下所示。我想console.log(x(370))是有道理的将输出到 280.14285714285717但如何将其设置为 0 以使线从 y 轴线开始呢？这是我拥有的一些必要的变量，

var margin = {
        top : 30,
        right : 20,
        bottom : 30,
        left : 50
    },
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;
 var arr =  [370, 700, 500];

我将向您展示我正在处理的引发此问题的完整代码，但让我告诉您结果有什么问题。折线图并非从左侧(y 轴)开始，并且我在获取线条和 x 刻度沿图表宽度展开时遇到问题 。我非常感谢您对此的帮助。

		var results = {
			"month1" :{
				"good" : 400,
				"bad" : 30
			},
			"month2" : {
				"good" : 800,
				"bad" : 100
			},"month3" :{
				"good" : 900,
				"bad" : 400
			}
		};
		var xLabels = d3.keys(results);
		var yLabels = ["bad", "good"];
		var arr = []
	    
	    for(var key in results){
	    	var obj = results[key];
	    	arr.push(obj.good - obj.bad);
		}

		var margin = {
			top : 30,
			right : 20,
			bottom : 30,
			left : 50
		},
		width = 600 - margin.left - margin.right,
		height = 270 - margin.top - margin.bottom;

		var y1 = d3.scale.ordinal()
			.domain(["bad", "good"])
			.rangePoints([height, 0])
		console.log(arr)
		var x = d3.scale.linear().domain([0,d3.max(d3.values(arr))]).range([0, width]);

		var y = d3.scale.linear().domain([0, d3.max(arr, function(a){
			return a;
		})]).range([height, 0])

		var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(arr.length).tickFormat(function(d, i){
			return xLabels[i]
		});

		var yAxis1 = d3.svg.axis().scale(y1).orient("left")

		console.log(x(370))

		var valueline = d3.svg.line()
			.x(function(d, i){
				console.log(x(d)); //outputs 280.14285714285717 , 530, 378.57142857142856
				return x(d)
			})
			.y(function(d){
				return y(d)
			})

		var svg = d3.select("body").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 + ")")


		svg.append("g").attr("class", "x axis").call(xAxis).attr("transform", "translate(0," + height + ")")

		svg.append("g").attr("class", "y axis").call(yAxis1)

		svg.append("path").attr("d", valueline(arr)).style({
		  "fill": "none",
		  "stroke": "red"
		}).classed("line", true)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

Answer 1

您的输入范围为 0-700，输出范围为 0-530。因此 0 将被映射到 0 和 380，正如您注意到的被映射到 ~280 一样。如果您希望最小值 (380) 映射到 0，则应将 380 设置为输入域的开头，或者更一般地这样做，以防输入数组发生更改:

var x = d3.scale.linear()
    .domain([d3.min(arr), d3.max(arr)])
    .range([0, width])
;

对于关联数组，您只需要 d3.values。