1
我試圖做一個線圖和攤開蜱軸上
- y軸應在 底部 有標籤「好」在頂部和「壞」
- x軸應該有「1個月，2個月，3個月」
現在問題是標籤沒有被分散在x軸的長度上。我通過做var x = d3.scale.linear().domain([0, arr.length]).range([0, width +200])使x軸的刻度看起來很分散，我不想使用200部分，但如果我不使用它，那麼線不會穿過圖的整個長度。此外，對於Y軸，「好」和「壞」標籤位於底部。 「好」應該是在頂部和「壞的應該是在底部。
\t \t var results = {
\t "month1" : {"good" : 400,"bad" : 30} ,
\t "month2" : {"good" : 800, "bad" : 100},
\t "month3" : {"good" : 900, "bad" : 400}
\t };
\t \t var arr = []
\t \t for(var key in results){
\t \t \t var obj = results[key];
\t \t \t arr.push(obj.good * 2 - obj.bad * 2)
\t \t }
\t \t console.log(arr)
\t \t var margin = {top : 30, right : 20, bottom : 30, left: 50},
\t \t \t \t \t \t width = 600 - margin.left - margin.right,
\t \t \t \t \t \t height = 270 - margin.top - margin.bottom;
\t \t // var x = d3.scale.linear().range([0, width-30])
\t \t var x = d3.scale.linear().domain([0, arr.length]).range([0, width +200])
\t \t var y = d3.scale.linear().domain([0,Math.max.apply(Math, arr)]).range([height,0])
\t \t var tickLabels = ["1 mo", "2 mo", "3 mo"];
\t \t var yLabel = ["bad", "good"]
\t \t // var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function(d, i) { return tickLabels[i]})
\t \t var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(arr.length).tickFormat(function(d,i){
\t \t \t return tickLabels[i]
\t \t })
\t \t // var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5)
\t \t var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(function(d, i) { return yLabel[i]})
\t \t var valueline = d3.svg.line()
\t \t \t .x(function(d, i) {return x(i)})
\t \t \t .y(function(d) {return y(d)})
\t \t var svg = d3.select("body").append("svg")
\t \t \t .attr("width" , width + margin.left + margin.right)
\t \t \t .attr("height", height + margin.top + margin.bottom)
\t \t \t .append("g")
\t \t \t \t .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
\t \t \t // y.domain([0, d3.max(arr, function(d) {return d})])
\t \t \t // x.domain([0, 2])
\t \t \t svg.append("g").attr("class", "y axis").call(yAxis)
\t \t \t svg.append("g").attr("class", "x axis").call(xAxis).attr("transform", "translate(0," + height + ")")
\t \t svg.append("path").attr("d", valueline(arr)).style({"fill" : "none", "stroke" : "red"}).classed("line", true)<script src="http://d3js.org/d3.v3.js"></script>我期待到順序量表現在或可能改變的結構數據來幫助我。我寧願保持數據結構相同。
更新我試圖改變var y =部分var y = d3.scale.ordinal().domain(["good", "bad"]).range([height, 0])，這給了「好」與「壞」的文字在上的適當位置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)，這會導致「好」和「壞」標籤更加分散，因此看起來更好，因爲它們都不在底部。但「好」的文字並不是頂部，它看起來只有y軸的三分之三。所以這個問題還沒有完成。差不多了。
仍需幫助拉伸折線圖和x零件的標籤。
你可以把什麼都要圖看起來像一個屏幕截圖你不顯示基於該線由軸（或者你正在努力實現的目標）。 令人困惑的部分是，你有類似於「月3」的記錄：{「good」：900，「bad」：400}'所以400和900應該如何顯示，因爲y軸有好壞，x軸有1個月，2個月等， – Cyril
對不起，我不清楚，我更新了這個問題，希望你能更好地理解。該網站將通過點擊「好」或「壞」按鈕來讓用戶始終投票，並且我想在線圖上顯示過去三個月的結果。所以''month3「：{」good「：900，」bad「：400}'將會有500的y座標和'3mo'的x座標..'obj.good * 2 - obj.bad * 2'可能會讓我感到困惑，因爲我正在測試縮放，所以我添加了「* 2」。而不是在y軸上顯示間隔。它應該只顯示好壞。讓我知道你的問題。 –
好，所以y是一個函數（obj.good * 2 - obj.bad * 2），用於數據'{「good」：900，「bad」：400}'它將是900 * 2 -400 * 2 = 1000但你說的是500.如果我錯了，你能糾正我嗎？ – Cyril