javascript - D3.3:无法以 Hour:Min:Sec 格式将时间正确地表示为 X 轴?
问题描述
我有一个字典列表,可以使用 D3 以图表形式表示数据,但由于我无法以 H:M:S 格式解析时间,因此图表显示不正确。
这是几行:
var data= [{ val: "0", timestamp : "10:20:45"},
{ val: "0", timestamp : "10:21:45" },
{ val: "0" , timestamp : "10:22.45"},
{ val: "0" , timestamp : "10:20:45"},
{ val : "267", timestamp : "10:21:45" },
{ val : "0", timestamp : "10:22.45"},
{ val: "0" , timestamp : "10:24:45"},
{ val : "128", timestamp : "10:25:45" },
{ val : "0", timestamp : "10:30.45"},
]
var parseDate = d3.time.format("%H:%M:%S").parse;
// Set the ranges
var x = d3.time.scale().range([0, graphWidth]);
var y = d3.scale.linear().range([graphHeight, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
我想,我已经涵盖了几乎所有的东西,但它不知何故不起作用。我是使用 D3 的新手,需要一些帮助。完整代码 - https://jsfiddle.net/gaurav10022/p8oxdcey/
解决方案
首先,您需要规范化您的数据,以便您拥有唯一的键,并且您可以看到特定时间的单个点。为此,您需要使用d3.nest
.
它将创建一个时间newData
位置,并将成为您想要展示的价值。key
values
var dataset = [{
val: "0",
timestamp: "10:20:45"
},
{
val: "34",
timestamp: "10:20:46"
},
{
val: "45",
timestamp: "10:20:47"
},
{
val: "54",
timestamp: "10:20:48"
},
{
val: "0",
timestamp: "10:21:45"
},
{
val: "0",
timestamp: "10:22.45"
},
{
val: "0",
timestamp: "10:20:45"
},
{
val: "267",
timestamp: "10:21:45"
},
{
val: "0",
timestamp: "10:22.45"
},
{
val: "0",
timestamp: "10:24:45"
},
{
val: "128",
timestamp: "10:25:45"
},
{
val: "0",
timestamp: "10:30.45"
},
]
data = d3.nest()
.key(function(d) {
return d.timestamp
})
.rollup(function(leaves) {
return d3.sum(leaves, function(d) {
return +d.val
})
})
.entries(dataset)
const firstValue = 0,
lastValue = data.length,
middleValue = Math.round((firstValue + lastValue) / 2),
secondVaue = Math.round((firstValue + middleValue / 2)),
thirdValue = Math.round((middleValue + lastValue) / 2)
var width = 500,
height = 200;
var svg = d3.selectAll("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var xScale = d3.scalePoint()
.domain(data.map(function(d) {
return d.key
}))
.range([50, width - 50])
.padding(0.5);
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {
return d.value
}) * 1.1])
.range([height - 50, 10]);
var line = d3.line()
.x(function(d, i) {
return xScale(d.key)
})
.y(function(d, i) {
return yScale(d.value)
});
svg.append("path")
.attr("d", line(data))
.attr("stroke", "teal")
.attr("stroke-width", "2")
.attr("fill", "none");
var xAxis = d3.axisBottom(xScale)
if (data.length > 5) {
const firstValue = 0,
lastValue = data.length - 1,
middleValue = Math.round((firstValue + lastValue) / 2),
secondValue = Math.round((firstValue + middleValue / 2)),
thirdValue = Math.round((middleValue + lastValue) / 2),
tickArr = [data[firstValue].key, data[secondValue].key, data[middleValue].key, data[thirdValue].key, data[lastValue].key];
xAxis
.tickValues(tickArr);
}
var yAxis = d3.axisLeft(yScale).ticks(5);
svg.append("g").attr("transform", "translate(0,150)")
.attr("class", "xAxis")
.call(xAxis);
svg.append("g")
.attr("transform", "translate(50,0)")
.attr("class", "yAxis")
.call(yAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>
我希望它能解决你的问题。
我建议你看看这个例子,它可能会帮助你重塑你的图表想法。https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f
根据要求更新了代码 - https://jsfiddle.net/wkb8vzjp/
推荐阅读
- c++ - Arduino Leonardo,Wire.h 抛出错误,但设置为 Esp32 时没有错误
- php - 在 Wordpress gutenberg 块编辑器中编辑帖子时如何添加额外的查询 URL 变量?
- php - 将输入序列转换为列表数组的算法
- go - Golang如何使用go mod命令安装lib
- apache-spark - Hive 未分区表未加载数据
- flutter - Flutter:如何使 buttonNavigationBar 的 BottomAppBar 出现在我拥有的每个屏幕中?
- php - PHP- Laravel 如何在函数内部调用函数?
- robotframework - 如何使用 Robot Framework 捕获警报框
- databricks - 用于开发的 Databricks 本地实例
- python - 如何在views.py django中设置默认图像