-1
我明顯錯過了一些簡單的東西，正在尋找一些專家的意見。我一直在嘗試使用d3創建一個帶有x軸時間軸的簡單條形圖，其中數據集將在點擊按鈕時更新。根據用戶輸入（最終和最顯着的時間範圍選擇），每個數據集將具有不同的長度。爲了解決我的特殊問題，我已經提取了下面提供的代碼中包含的變量'live'和'test'中存儲的兩個數據集，也在jsFiddle中複製：http://jsfiddle.net/jimaroonie/6WBEU/用x軸時間軸更新圖表上不同長度的條形圖數據使用d3
我的問題是， t讓條形圖更新爲新數據集的值。數據會隨着數據集的長度決定每個欄的寬度而發生變化，當您單擊更新按鈕時，這些欄的寬度會顯而易見（請注意，我使用序數比例來驅動此方面，而x軸使用時間比例格式（比較下面的'xord'和'x'變量））。
那麼，我哪裏錯了？我想我可能會錯過選擇層次結構的東西，或者數據如何被追加到（如果有的話）？希望有人能指出我正確的方向。
HTML包含簡單的按鈕：
<body>
<div id="click">
<button>Update</button>
</div>
</body>
.CSS用於造型和選擇：
body {
font: 12px Arial;
}
h1, h2 {
font-weight: bold;
}
path {
stroke-width: 2;
fill: none;
}
.servers-class {
stroke: steelblue;
shape-rendering: crispEdges;
}
.players-class {
stroke: red;
}
.bar-class {
fill: lightblue;
}
.axis path, .axis line {
fill: none;
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
}
最後，JavaScript的：
var live = [{"Servers":"10301","Players":"7743","Retrieved":"2013-08-01 03:00:05"},{"Servers":"10301","Players":"8987","Retrieved":"2013-08-01 02:00:05"},{"Servers":"10299","Players":"9973","Retrieved":"2013-08-01 01:00:06"},{"Servers":"10294","Players":"11066","Retrieved":"2013-08-01 00:00:04"},{"Servers":"10291","Players":"12194","Retrieved":"2013-07-31 23:00:05"},{"Servers":"10285","Players":"14094","Retrieved":"2013-07-31 22:00:05"},{"Servers":"10281","Players":"16666","Retrieved":"2013-07-31 21:00:05"},{"Servers":"10274","Players":"19626","Retrieved":"2013-07-31 20:00:11"},{"Servers":"10264","Players":"20595","Retrieved":"2013-07-31 19:00:05"},{"Servers":"10257","Players":"20289","Retrieved":"2013-07-31 18:00:07"},{"Servers":"10246","Players":"19772","Retrieved":"2013-07-31 17:00:04"},{"Servers":"10235","Players":"19025","Retrieved":"2013-07-31 16:00:04"},{"Servers":"10225","Players":"19226","Retrieved":"2013-07-31 15:00:05"},{"Servers":"10217","Players":"18856","Retrieved":"2013-07-31 14:00:04"},{"Servers":"10211","Players":"17571","Retrieved":"2013-07-31 13:00:06"},{"Servers":"10203","Players":"16722","Retrieved":"2013-07-31 12:00:04"},{"Servers":"10195","Players":"16918","Retrieved":"2013-07-31 11:00:04"},{"Servers":"10186","Players":"16160","Retrieved":"2013-07-31 10:00:05"},{"Servers":"10179","Players":"15283","Retrieved":"2013-07-31 09:00:04"},{"Servers":"10218","Players":"13658","Retrieved":"2013-07-31 08:00:07"},{"Servers":"10215","Players":"10549","Retrieved":"2013-07-31 07:00:04"},{"Servers":"10213","Players":"7698","Retrieved":"2013-07-31 06:00:05"},{"Servers":"10210","Players":"6548","Retrieved":"2013-07-31 05:00:05"},{"Servers":"10340","Players":"6603","Retrieved":"2013-07-31 04:00:05"}];
var test = [{"Servers":"10215","Players":"15378","Retrieved":"2013-07-30 09:00:05"},{"Servers":"10207","Players":"12884","Retrieved":"2013-07-30 08:00:04"},{"Servers":"10205","Players":"10113","Retrieved":"2013-07-30 07:00:04"},{"Servers":"10200","Players":"7381","Retrieved":"2013-07-30 06:00:07"},{"Servers":"10195","Players":"6268","Retrieved":"2013-07-30 05:00:04"},{"Servers":"10302","Players":"6477","Retrieved":"2013-07-30 04:00:04"},{"Servers":"10293","Players":"7925","Retrieved":"2013-07-30 03:00:05"},{"Servers":"10288","Players":"9181","Retrieved":"2013-07-30 02:00:05"},{"Servers":"10286","Players":"10238","Retrieved":"2013-07-30 01:00:04"},{"Servers":"10291","Players":"10865","Retrieved":"2013-07-30 00:00:04"},{"Servers":"10290","Players":"11770","Retrieved":"2013-07-29 23:00:05"},{"Servers":"10283","Players":"13600","Retrieved":"2013-07-29 22:00:05"},{"Servers":"10280","Players":"16196","Retrieved":"2013-07-29 21:00:04"},{"Servers":"10274","Players":"18868","Retrieved":"2013-07-29 20:00:05"},{"Servers":"10264","Players":"19884","Retrieved":"2013-07-29 19:00:05"},{"Servers":"10250","Players":"19667","Retrieved":"2013-07-29 18:00:05"},{"Servers":"10240","Players":"18211","Retrieved":"2013-07-29 17:00:05"},{"Servers":"10230","Players":"17748","Retrieved":"2013-07-29 16:00:04"},{"Servers":"10220","Players":"17977","Retrieved":"2013-07-29 15:00:05"},{"Servers":"10211","Players":"17914","Retrieved":"2013-07-29 14:00:06"},{"Servers":"10206","Players":"16742","Retrieved":"2013-07-29 13:00:06"},{"Servers":"10189","Players":"16475","Retrieved":"2013-07-29 12:00:05"},{"Servers":"10175","Players":"16201","Retrieved":"2013-07-29 11:00:05"},{"Servers":"10163","Players":"15738","Retrieved":"2013-07-29 10:00:05"},{"Servers":"10157","Players":"14728","Retrieved":"2013-07-29 09:00:05"},{"Servers":"10201","Players":"12660","Retrieved":"2013-07-29 08:00:06"},{"Servers":"10192","Players":"10393","Retrieved":"2013-07-29 07:00:05"},{"Servers":"5000","Players":"7846","Retrieved":"2013-07-29 06:00:05"},{"Servers":"10184","Players":"6342","Retrieved":"2013-07-29 05:00:05"},{"Servers":"10294","Players":"6716","Retrieved":"2013-07-29 04:00:07"},{"Servers":"10291","Players":"7863","Retrieved":"2013-07-29 03:00:05"},{"Servers":"10289","Players":"8796","Retrieved":"2013-07-29 02:00:06"},{"Servers":"10286","Players":"9748","Retrieved":"2013-07-29 01:00:05"},{"Servers":"10281","Players":"10415","Retrieved":"2013-07-29 00:00:05"},{"Servers":"10275","Players":"11513","Retrieved":"2013-07-28 23:00:04"},{"Servers":"10271","Players":"13356","Retrieved":"2013-07-28 22:00:05"},{"Servers":"10264","Players":"16443","Retrieved":"2013-07-28 21:00:05"},{"Servers":"10255","Players":"19093","Retrieved":"2013-07-28 20:00:05"},{"Servers":"10247","Players":"19162","Retrieved":"2013-07-28 19:00:04"},{"Servers":"10238","Players":"19187","Retrieved":"2013-07-28 18:00:05"},{"Servers":"10232","Players":"17643","Retrieved":"2013-07-28 17:00:04"},{"Servers":"10226","Players":"17413","Retrieved":"2013-07-28 16:00:04"},{"Servers":"10217","Players":"16721","Retrieved":"2013-07-28 15:00:06"},{"Servers":"10204","Players":"15756","Retrieved":"2013-07-28 14:00:05"},{"Servers":"10194","Players":"14853","Retrieved":"2013-07-28 13:00:04"},{"Servers":"10181","Players":"14262","Retrieved":"2013-07-28 12:00:06"},{"Servers":"10177","Players":"13976","Retrieved":"2013-07-28 11:00:04"},{"Servers":"10167","Players":"13895","Retrieved":"2013-07-28 10:00:06"}];
// Set the dimensions of the canvas/graph
var margin = {top: 30, right: 50, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Parse the date/time
var parseDate = d3.time.format.iso.parse;
// Set the ranges
var x = d3.time.scale()
.range([0, width])
;
var y = d3.scale.linear()
.range([height, 0])
;
// Define the axes
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(12)
//.tickFormat(d3.time.format("%H:%M"))
;
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
// Define the lines
var serversLine = d3.svg.line()
.interpolate("step-before")
.x(function(d) { return x(parseDate(d.Retrieved)); })
.y(function(d) { return y(d.Servers); });
var playersLine = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(parseDate(d.Retrieved)); })
.y(function(d) { return y(d.Players); });
// Adds the svg canvas
var chart = 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 + ")");
// Scale the range of the data
x.domain(d3.extent(live, function(d) { return parseDate(d.Retrieved); }));
y.domain([0, d3.max(live, function(d) { return Math.max(d.Servers, d.Players); })]);
var xord = d3.scale.ordinal()
.domain(d3.range(live.length))
.rangeRoundBands([0, width], 0.05);
// Display Bar Chart
chart.selectAll("container")
.data(live)
.enter()
.append("rect")
.attr("class", "bar-class")
.attr("x", function(d) { return x(parseDate(d.Retrieved)); })
.attr("y", function(d) { return y(d.Servers); })
.attr("width", xord.rangeBand())
.attr("height", function(d) { return height - y(d.Servers); })
;
chart.append("path")
.attr("class", "players-class")
.attr("d", playersLine(live));
// Add the X Axis
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
chart.append("g")
.attr("class", "y axis")
.call(yAxis);
d3.select("#click")
.on("click", function() {
// Scale the range of the data
x.domain(d3.extent(test, function(d) { return parseDate(d.Retrieved); }));
y.domain([0, d3.max(test, function(d) { return Math.max(d.Servers, d.Players); })]);
var xord = d3.scale.ordinal()
.domain(d3.range(test.length))
.rangeRoundBands([0, width], 0.05);
var chart = d3.select("body");
chart.select(".players-class")
.attr("d", playersLine(test));
chart.select(".x.axis")
.call(xAxis);
chart.select(".y.axis")
.call(yAxis);
var bars = chart.selectAll("rect")
.data(test);
bars.enter()
.append("rect")
.attr("x", function(d) { return x(parseDate(d.Retrieved)); })
.attr("y", function(d) { return y(d.Servers); })
.attr("width", xord.rangeBand())
.attr("height", function(d) { return height - y(d.Servers); })
;
bars.transition()
.duration(750)
.attr("x", function(d) { return x(parseDate(d.Retrieved)); })
.attr("y", function(d) { return y(d.Servers); })
.attr("width", xord.rangeBand())
.attr("height", function(d) { return height - y(d.Servers); })
;
bars.exit()
.remove();
});
OMG我希望我知道如何調試/讀取代碼/做任何更好的事情，因爲簡單地刪除該行可以作爲一種享受！你，@amakhrov是一個明星 - 道具給你，並感謝您花時間閱讀！ – jimaroonie