我想知道如何让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>
答案 0 :(得分:0)
您的输入域从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。