i有一系列数据,每个元素都包含一个日期和一些信息要显示。我无法绘制Barchart。
我尝试了多种解决方案,但没有人工作到目前为止。
数据是一个具有以下内容的数组。
{ metric1: 10,
metric2: 20,
metric3: 30,
timestamp: a Date object }
现在,我想在X轴上以索引为X轴绘制彼此相邻的指标。
const x = d3.scaleTime()
.rangeRound([0, width]);
const y = d3.scaleLinear()
.rangeRound([height, 0]);
const z = d3.scaleOrdinal(d3.schemeCategory10);
const xAxis = d3.axisBottom(x)
.tickFormat(d3.timeFormat('%a %H:%M'));
const yAxis = d3.axisLeft(y);
这是正确的,但现在是棘手的部分。我需要添加域。此外,我有颜色,并从数据中抽象了正确的键。
x.domain(d3.extent(data, d => d.date));
y.domain(max of metrics);
但是,z的域对我来说还不清楚,只有使用" scaleband",我才能使用bandwidth((确保栏目在相应的日期之前被划定。
。我尝试了几个指南和示例。但是他们都让我挂在正确构造图表上。目前,我只能看到绘制的轴。
我能做的是例如:
var legend = svg => {
const g = svg
.attr("transform", `translate(${width},0)`)
.attr("text-anchor", "end")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("g")
.data(color.domain().slice().reverse())
.join("g")
.attr("transform", (d, i) => `translate(0,${i * 20})`);
g.append("rect")
.attr("x", -19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", color);
g.append("text")
.attr("x", -24)
.attr("y", 9.5)
.attr("dy", "0.35em")
.text(d => d);
}
上面的功能非常完美,以便用正确的键和颜色绘制传奇。但是条没有出现。
有人可以将我指向一个好指南吗?
基本上您在分组时不能将scaletime用于x轴。解决方案是使用以下内容:d3.TimeFormat将日期解析为字符串(间隔需要相似以使其可视化才有意义(