我想知道如何让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>
最佳答案
您的输入范围为 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。
关于javascript - 折线图的 x 坐标缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36047324/