缩放线图

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)
        })

你可以在评论中看到控制台没有为输出280.14285714285717的第一个输出输出0。

这是我的x变量var x = d3.scale.linear().domain([0,d3.max(d3.values(arr))]).range([0, width]);我是d3的新手，但我认为这会将我从0开始的所有输入都带到arr数组的最大值，并将其从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轴）开始，而我在使用 AND 线的时候遇到问题，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。