- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 d3.js 中有一个折线图,其中每年在 X 轴上都有标签(显示 20 年的数据)。标签是通过以下方式创建的:
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%b/%d/%Y")).ticks(d3.timeYear))
.selectAll("text")
.style("text-anchor", "end")
.attr("dy", ".25em")
.attr("transform", "rotate(-45)");
最佳答案
这样做的一种方法是明确指定每个所需的轴刻度值。函数 axis.tickValues
专为此而设计。
以下函数生成一个日期数组,从 min
开始日期(在您的情况下为 2000 年 6 月 28 日),并在 max
之前添加一年日期(2020 年 6 月 28 日)已到。由于数据集不包含所有年份的数据,因此必须执行此生成步骤。
function generateTickvalues(min, max) {
let res = []
, currentExtent = new Date(min.valueOf())
while(currentExtent <= max) {
res.push(new Date(currentExtent.valueOf()))
currentExtent.setFullYear(currentExtent.getFullYear() + 1);
}
return res
}
new Date(date.valueOf())
在这个函数中是必要的,这样原始数据集中的日期值就不会被覆盖。
d3.extent
可以方便地找到数据集中的最小和最大日期。 .这个数组也可以在调用
x.domain
时使用.
let dateExtent = d3.extent(data, function(d) { return d.date})
let tickValues = generateTickvalues(dateExtent[0], dateExtent[1])
x.domain(dateExtent);
axis.tickValues
,传递刚生成的从六月开始的年份数组:
d3.axisBottom(x)
.tickFormat(d3.timeFormat("%b/%d/%Y"))
.ticks(d3.timeYear)
.tickValues(tickValues)
const data = [
{ value: 46, date: '2000-06-28', formatted_date: '06/28/2000' },
{ value: 48, date: '2003-06-28', formatted_date: '06/28/2003' },
{ value: 26, date: '2004-06-28', formatted_date: '06/28/2004' },
{ value: 36, date: '2006-06-28', formatted_date: '06/28/2006' },
{ value: 40, date: '2010-06-28', formatted_date: '06/28/2010' },
{ value: 48, date: '2012-06-28', formatted_date: '06/28/2012' },
{ value: 34, date: '2018-06-28', formatted_date: '06/28/2018' },
{ value: 33, date: '2020-06-28', formatted_date: '06/28/2020' }
];
create_area_chart(data, 'history-chart-main');
function generateTickvalues(min, max) {
let res = []
, currentExtent = new Date(min.valueOf())
while(currentExtent <= max) {
res.push(new Date(currentExtent.valueOf()))
currentExtent.setFullYear(currentExtent.getFullYear() + 1);
}
return res
}
function create_area_chart(data, target){
document.getElementById(target).innerHTML = '';
var parentw = document.getElementById(target).offsetWidth;
var parenth = 0.6*parentw;
var svg = d3.select('#'+target).append("svg").attr("width", parentw).attr("height", parenth),
margin = {top: 20, right: 20, bottom: 40, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y-%m-%d");
bisectDate = d3.bisector(function(d) { return d.date; }).left;
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var area = d3.area()
.x(function (d) { return x(d.date); })
.y1(function (d) { return y(d.value); });
data.forEach(function (d) {
//only parse time if not already parsed (i.e. when using time period filters)
if(parseTime(d.date))
d.date = parseTime(d.date);
d.value = +d.value;
});
let dateExtent = d3.extent(data, function(d) { return d.date})
let tickValues = generateTickvalues(dateExtent[0], dateExtent[1])
x.domain(dateExtent);
y.domain([0, 1.05 * d3.max(data, function (d) { return d.value; })]);
area.y0(y(0));
g.append("rect")
.attr("transform", "translate(" + -margin.left + "," + -margin.top + ")")
.attr("width", svg.attr("width"))
.attr('class', 'overlay')
.attr("height", svg.attr("height"))
.on("mouseover", function () {
d3.selectAll(".eps-tooltip").remove();
d3.selectAll(".eps-remove-trigger").remove();
focus.style("display", "none");
});
g.append("path")
.datum(data)
.attr("fill", "#f6f6f6")
.attr("d", area);
//create line
var valueline = d3.line()
.x(function (d) { return x(d.date); })
.y(function (d) { return y(d.value); });
g.append("path")
.data([data])
.attr('fill', 'none')
.attr('stroke', '#068d46')
.attr("class", "line")
.attr("d", valueline);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%b/%d/%Y")).ticks(d3.timeYear).tickValues(tickValues))
.selectAll("text")
.style("text-anchor", "end")
.attr("dy", ".25em")
.attr("transform", "rotate(-45)");
g.append("g")
.call(d3.axisLeft(y)
.tickFormat(function (d) { return "$" + d }))
.append("text")
.attr("fill", "#068d46")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end");
var focus = g.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("line")
.attr("class", "x-hover-line hover-line")
.attr("y1", 0)
.attr("y2", height);
focus.append("line")
.attr("class", "y-hover-line hover-line")
.attr("x1", width)
.attr("x2", width);
focus.append("circle")
.attr("fill", "#068d46")
.attr("r", 4);
focus.append("text")
.attr("class", "text-date focus-text")
.attr("x", 0)
.attr("y", -20)
.attr("dy", ".31em")
.style("text-anchor", "middle");
focus.append("text")
.attr("class", "text-val focus-text")
.attr("x", 0)
.attr("y", -30)
.attr("dy", ".31em")
.style("text-anchor", "middle");
g.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function () { focus.style("display", null); })
.on("mousemove", function () {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.year > d1.year - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.value) + ")");
focus.select(".text-date").text(function () { return d.formatted_date; });
focus.select(".text-val").text(function () { return '$' + d.value; });
focus.select(".x-hover-line").attr("y2", height - y(d.value));
focus.select(".y-hover-line").attr("x2", width + width);
});
}
.chart {
text-align: center;
padding: 10px 10px 25px 10px;
background: #f6f6f6;
}
.chart svg {
overflow: visible;
}
.chart .overlay {
fill: none;
pointer-events: all;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js"></script>
<div class="chart" id="history-chart-main"></div>
关于javascript - 在 d3.js 图表上显示 6 月而不是 1 月的年度 X 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60756142/
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit th
需要在x轴的区间内显示日期标签。数据应保持不变,仅应根据快照显示日期间隔。 对于 y 轴上的简单数字,可以使用“刻度”实现这一点 max: 5000,
我目前正在使用 IOS 图表,该库的链接位于:Link 目前,图表左轴标签未代表其应有的内容。该图表当前已放大,以便可以平移。 这是一张显示左轴的图片: 实际的数据集是: y值 = [0,2,4,5,
我是第一次使用 ASP.NET 图表,并取得了巨大的成功。我想做的一件事是放大我的图表,使 y 值不在 0-100 之间。例如,假设我有一些点值,范围从 72 到 89。我想做的是在 y 轴上将最低
我正在使用 google graph 设计图表。我不需要 x 和 y 轴上的标签,所以我通过设置以下选项来隐藏它们: var options = { hAxis: { base
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,因为
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想改善这个问题吗?更新问题,以便将其作为on-topic
我得到了这个模板(默认) {name} 产生这个: 我想拥有与它的每一个功能相同的模板。但是,我还需要一个 if 子句。如果一个项目的值为 0,我不希望它被“传奇化”。 这是完整的代码 { xtype
我使用这些行从关闭的工作簿中获取值: Arg = "'" & Path & "[" & File & "]" & Sheet & "'!" & "R4C4" Arg = CStr(Arg) GetV
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
我有一张像这样的 table ________| S1 | S2|----------| a | b || b | c | -------- 我需要将其显示在散点图图表(或其他任何图表)上,其中
这个问题已经有答案了: Fix spacing between different series in JavaFX line chart (1 个回答) 已关闭 4 年前。 我有这个代码: publ
我已经阅读了 4 个 erlang 的开源系统 3 个月了,它们是 rabbitmq、couchdb、gproc、jobs。 它们和我以前的c#系统完全不同,因为有很多进程而且不是面向对象的。 用设计
我们希望使用我们设计的自定义图像动态创建图表。这将在 Java 1.5 Web 应用程序中使用。一个例子是显示代表男女比例的图表。我们希望图表是女性图标和男性图标的线性行,其中女性图标的数量将是女性的
我有 2 列,一列包含我的数据点,另一列包含每个数据点的标准差。如何在 Excel 上绘制线图,其误差线等于每个点的透视标准差? 例如 Col-1 Col-2 1 0.1 2 0
我正在使用 JFreechart API 来生成“条形图”。我可以保存它们,但如何从 Java GUI 应用程序的打印机打印它们? 最佳答案 我在代码中使用以下代码片段。 IStatisticsGra
我有一个电子表格,其中包含大量图表,还有一张工作表,其中包含大量为这些图表提供数据的数据。 我使用 在每个图表上绘制了数据 =Sheet1!$C5:$C$3000 这基本上只是在图表上绘制 C5 到
我很少使用Excel,对图表和绘图相关函数没有深入的了解。话虽如此... 我有几十行数据,由 4 列组成 第 1 列 = 金额/价格(以数字表示) 第 2 列 = 描述(内容正文) 第 3 列 = 类
我正在使用 iOS-Charts,升级到 Swift3 后,我现在注意到图表底部有一个奇怪的空白区域,说明会出现在该空白区域。我尝试隐藏描述(将其设置为“”或启用= false),但它仍然显示此差距。
我已经在评论中的以下链接之一中找到了一些使用实时数据绘制图表的示例。我现在的问题是,我还可以实时绘制图表标签、坐标轴和其他相关内容吗? 其实我要找的是绘制实时数据的图表。通过搜索实时而非动态数据,我找
我是一名优秀的程序员,十分优秀!