Question

我试图制作折线图和

y轴应该有标签＆＃34; good＆＃34;在顶部和＆＃34;坏＆＃34;在底
x轴应该是＆＃34; 1 mo，2 mo，3mo＆＃34;

现在的问题是标签没有在x轴的长度上展开。我通过做var x = d3.scale.linear().domain([0, arr.length]).range([0, width +200])使x轴刻度看起来展开了我不想使用200部分，但如果我不使用它，那么这条线就没有经过整个长度图表。此外，对于y轴，＆＃34;好＆＃34;并且＆＃34;坏＆＃34;标签在底部。＆＃34;好＆＃34;应该是在最顶层而且“坏”应该在底部。

＆＃13;

		var results = {
	        "month1" : {"good" : 400,"bad" : 30} ,
	        "month2" : {"good" : 800, "bad" : 100},
	        "month3" : {"good" : 900, "bad" : 400}

	    };

		var arr = []

		for(var key in results){
			var obj = results[key];
			arr.push(obj.good  * 2 - obj.bad * 2)
		}
		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-30])
		var x = d3.scale.linear().domain([0, arr.length]).range([0, width +200])
		var y = d3.scale.linear().domain([0,Math.max.apply(Math, arr)]).range([height,0])

		var tickLabels = ["1 mo", "2 mo", "3 mo"];
		var yLabel = ["bad", "good"]

		// var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function(d, i) { return tickLabels[i]})
		var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(arr.length).tickFormat(function(d,i){
			return tickLabels[i]
		})

		// var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5)
		var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(function(d, i) { return yLabel[i]})

		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([0, d3.max(arr, function(d) {return d} )])
			// x.domain([0, 2])

			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" : "red"}).classed("line", true)

＆＃13;

<script src="http://d3js.org/d3.v3.js"></script>

＆＃13;

我现在正在研究序数量表，或者可能会改变数据结构来帮助我。我宁愿保持数据结构相同。

更新我尝试将var y =部分更改为var y = d3.scale.ordinal().domain(["good", "bad"]).range([height, 0])。它给了'好'＆＃34;并且＆＃34;坏＆＃34;在y轴上的适当位置发短信但是我认为这弄乱了线图。它看起来不同。如果数组的第一个元素不是0，我不知道图的开头是0（意思是左下角）。

更新2 我采用了上次更新中提及的var y内容，并添加了.ticks(2)，因此此部分看起来像var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(function(d, i) { return yLabel[i]}).ticks(2)这会导致＆＃34;良好＆＃34;并且＆＃34;坏＆＃34;标签更加分散，因此它们看起来更好，因为它们都不在底部。但是好的＆＃34;文字不是一直在顶部，它看起来像是在y轴上方的四分之三。所以这个问题还没有完成。几乎就在那里。

仍然需要帮助拉伸线图和x部分的标签。

Answer 1

除此之外，您从绘制线条的y轴开始，为序数创建一个新的比例[好，坏]：

var y1 = d3.scale.ordinal()
   .domain(["bad", "good"])
  .rangePoints([height, 0]);

为它定义一个轴：

var yAxis1 = d3.svg.axis().scale(y1).orient("left")

绘制y轴：

svg.append("g").attr("class", "y axis").call(yAxis1)

您可以使用{y}轴，如this

或者您不会根据this

这样的行显示轴

展开轴上的刻度线

1 个答案: