我显然在这里遗漏了一些简单的东西并寻找一些专家意见。我一直在尝试使用 d3 创建一个带有 x 轴时间线的简单条形图，其中数据集将在单击按钮时更新。每个数据集将根据用户输入具有不同的长度（最终和最突出的是选择的时间范围）。为了解决我的特殊问题，我只提取了存储在下面提供的代码中包含的变量“live”和“test”中的两个数据集，也在 jsFiddle 中复制：http: //jsfiddle.net/jimaroonie/6WBEU/
我的问题是我无法使用新数据集的值更新条形图。随着数据集的长度决定了每个条的宽度，当您单击更新按钮时，数据正在发生变化（请注意，我使用序数刻度来驱动这一方面，而 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();
});