Question

我计划从用户那里获得投票，并将最近三个月的结果显示在折线图中。几个月后，他们将点击“好”或“坏”按钮。这里有一些数据，我会试着让它看起来像它来自服务器。

function main() {
  return bootstrap(App, [
    // These are dependencies of our App
    HTTP_PROVIDERS,
    ROUTER_PROVIDERS,
    MyService,
    ELEMENT_PROBE_PROVIDERS // remove in production
  ])
  .catch(err => console.error(err));
}

document.addEventListener('DOMContentLoaded', main);

我以为我会得到一个像[370,100，-100]这样的数组减去坏的数据。我猜这些将是图表上的线将经过的点。所以在“1个月”（这是在x轴上）线将经过370并且在“2个月”线上将经过100并且在“3个月”线将经过-100。

我猜y轴应该从-100到370
x轴上应该有三个刻度var results = { "month1" : {"good" : 400,"bad" : 30} , "month2" : {"good" : 200, "bad" : 100}, "month3" : {"good" : 100, "bad" : 200} };

到目前为止，我所知道的并不是很多，因为我感到很困惑。

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等来完成图表吗？这将非常有帮助。

编辑:::我会告诉你我现在拥有的东西

看起来我需要正确缩放x值以匹配轴

1 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, 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"})

Answer 1

您的x轴显示月份，因此您可以参考Array arr的索引。您的y轴显示值（好坏），因此它在该索引处变为值。因此，如果Array arr是您的数据集，则您的valueline应为：

var valueline = d3.svg.line()
    .x(function(d,i) {return x(i); })
    .y(function(d) {return y(d); });

在代码中的域/范围/刻度线上添加了此更改和更多更改：DEMO

需要帮助从数组制作折线图，我想要自定义刻度标签

1 个答案: