我计划从用户那里获得投票,并在折线图中显示最近三个月的结果。在过去的几个月中,他们将单击“好”或“坏”按钮。这是一些数据,我将尝试使它们看起来像来自服务器时的样子。
var results = {
"month1" : {"good" : 400,"bad" : 30} ,
"month2" : {"good" : 200, "bad" : 100},
"month3" : {"good" : 100, "bad" : 200}
};
我以为我会得到一个像[370,100,-100]这样的数组,从坏处减去好处。我猜这些将是线将通过的图形上的点。因此,在“ 1个月”(在x轴上),该行将通过370,在“ 2个月”,该行将通过100,在“ 3个月”,该行将通过-100。
我猜y轴应该从-100缩放到370
x轴上应有三个刻度
tickLabels = ["1 mo", "2 mo", "3 mo"]
到目前为止,这是我所知道的,因为我感到困惑,所以这不是很多。
var results = {
"month1" : {"good" : 400,"bad" : 30} ,
"month2" : {"good" : 200, "bad" : 100},
"month3" : {"good" : 100, "bad" : 200}
};
var arr = []
for(var key in results){
var obj = results[key];
arr.push(obj.good - obj.bad)
}
console.log(arr)
var margin = {top : 30, right : 20, bottom : 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var x = d3.scale.linear().range([0, width])
var y = d3.scale.linear().range([height, 0]);
var tickLabels = ["1 mo", "2 mo", "3 mo"]
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function(d, i) { return tickLabels[i]})
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5)
我遵循了一些教程,下一部分是这样的:
var valueline = d3.svg.line()
.x(function(d) {return x(d.date); })
.y(function(d) {return y(d.close); });
我显然没有
date
或close
。我只是不知道如何将行生成器应用于我的数据。所以您能帮我用适当的刻度标签,1 mo
等完成图表吗?那将非常有帮助。编辑:::我会告诉你我现在有什么
看来我需要正确缩放x值以匹配轴
var results = {
"month1" : {"good" : 400,"bad" : 30} ,
"month2" : {"good" : 200, "bad" : 100},
"month3" : {"good" : 100, "bad" : 200}
};
var arr = []
for(var key in results){
var obj = results[key];
arr.push(obj.good - obj.bad)
}
console.log(arr)
var margin = {top : 30, right : 20, bottom : 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var x = d3.scale.linear().range([0, width])
var y = d3.scale.linear().range([height, 0]);
var tickLabels = ["1 mo", "2 mo", "3 mo"]
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function(d, i) { return tickLabels[i]})
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5)
var valueline = d3.svg.line()
.x(function(d, i) {return x(i)})
.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 + ")")
y.domain([d3.min(arr, function(d) {return d} ), d3.max(arr, function(d) {return d} )])
svg.append("g").attr("class", "y axis").call(yAxis)
svg.append("g").attr("class", "x axis").call(xAxis).attr("transform", "translate(0," + height + ")")
svg.append("path").attr("d", valueline(arr)).style({"fill" : "none", "stroke" : "blue"})
<script src="http://d3js.org/d3.v3.js"></script>
最佳答案
您的x轴显示月份,因此您可以引用数组arr的索引。您的y轴显示value(好坏),因此它在该索引处成为value。因此,如果Array arr是您的数据集,则您的价值线应为:
var valueline = d3.svg.line()
.x(function(d,i) {return x(i); })
.y(function(d) {return y(d); });
在代码中在轴上的域/范围/刻度上添加了此以及其他几个更改:DEMO
关于javascript - 需要帮助从数组制作折线图,我想要自定义刻度标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36002482/