Javascript 使用d3更新具有x轴时间轴的图表上不同长度的条形图数据
我显然缺少一些简单的东西,需要一些专家的意见。我一直在尝试使用d3创建一个带有x轴时间线的简单条形图,其中数据集将在单击按钮后更新。每个数据集的长度取决于用户输入(最重要的是最终选择的时间范围)。为了解决我的特殊问题,我只提取了存储在下面提供的代码中的变量'live'和'test'中的两个数据集,它们也在JSFIDLE中复制: 我的问题是,我无法使用新数据集的值更新条。当数据集的长度决定每个条的宽度时,数据会发生变化,当您单击“更新”按钮时,每个条的宽度会明显起作用(请注意,我使用顺序标度来驱动此方面,而x轴使用时间标度格式(比较下面的“xord”和“x”变量)) 那么,我错在哪里呢?我想我可能缺少了一些关于选择层次结构的信息,或者数据是如何附加到其中的(如果有的话)。希望有人能给我指出正确的方向 HTML包含简单的按钮:Javascript 使用d3更新具有x轴时间轴的图表上不同长度的条形图数据,javascript,d3.js,bar-chart,timeline,Javascript,D3.js,Bar Chart,Timeline,我显然缺少一些简单的东西,需要一些专家的意见。我一直在尝试使用d3创建一个带有x轴时间线的简单条形图,其中数据集将在单击按钮后更新。每个数据集的长度取决于用户输入(最重要的是最终选择的时间范围)。为了解决我的特殊问题,我只提取了存储在下面提供的代码中的变量'live'和'test'中的两个数据集,它们也在JSFIDLE中复制: 我的问题是,我无法使用新数据集的值更新条。当数据集的长度决定每个条的宽度时,数据会发生变化,当您单击“更新”按钮时,每个条的宽度会明显起作用(请注意,我使用顺序标度来驱动
<body>
<div id="click">
<button>Update</button>
</div>
</body>
最后,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();
});
真有趣。
“单击”处理程序中有以下行:
var chart = d3.select("body");
之后,您将有效地将新的rect元素插入到BODY中,而不是SVG中。OMG我希望我知道如何调试/读取代码/做得更好,因为只需删除该行就可以了!你,@amakhrov是你的明星道具,感谢你花时间通读!
var chart = d3.select("body");