使用d3更新具有x轴时间线的图表上的各种长度的条形图数据
updating bar chart data of various lengths on a chart with an x-axis timeline using d3
我显然缺少一些简单的东西,正在寻找一些专家输入。我一直在尝试使用d3创建一个带有x轴时间线的简单条形图,点击按钮后数据集就会更新。每个数据集的长度将不同,这取决于用户输入(最终也是最突出的是所选的时间范围)。为了解决我的特定问题,我只提取了两个数据集,它们存储在下面提供的代码中的变量"live"answers"test"中,也在jsFiddle中复制:http://jsfiddle.net/jimaroonie/6WBEU/
我的问题是,我无法使用新数据集的值更新条形图。随着数据集的长度决定了每个条的宽度,数据也在变化,当你点击更新按钮时,条的宽度会很明显地起作用(请注意,我使用的是有序刻度来驱动这一方面,而x轴使用的是时间刻度格式(比较下面的"xord"answers"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();
});
这很有趣。您在"点击"处理程序中有以下行:
var chart = d3.select("body");
之后,您就可以有效地将新的rect元素插入BODY,而不是SVG。
相关文章:
- 添加新数据时D3.JS条形图列偏移量
- 在条形图中呈现数据AngularJS,如何制作一个好的多条形图
- 对d3堆叠条形图的数据进行排序
- D3:如何更改现有条形图中的数据
- 使用 mysql 数据创建条形图
- 如何使用 json 数据在 d3.js 中创建垂直分组的条形图
- 使条形图根据传入的数据进行调整
- d3.js 中多个分组条形图中的 X,Y 域数据绑定
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- 规范化堆叠条形图绘图问题.无论数据如何,所有矩形均等划分
- 如何筛选数据和填充 D3.js堆积条形图
- 我想通过单击按钮来更新此 d3.js 条形图上的数据.(点击)
- 使用交叉过滤器在 dc js 中对条形图的数据进行分组时遇到问题
- D3堆积条形图添加数据标签并解决D3标签放置问题
- 使用 D3 创建具有复杂数据集的灵活条形图
- 在 flot.js 中绘制折线图和条形图以获取 JSON 数据
- 条形图中的 D3 动态数据
- 更改谷歌条形图的颜色并将数据转换为百分比
- 高图表条形图:可以在数据标签内组合数据点
- 将数据(条形图和天气信息)插入SVG圆圈中