个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
更新: bl.ocks.org example已更新解决方案。
在计算刻度位置时，是否可以使时间刻度轴的默认刻度生成器忽略月份和年份边界？
如 this bl.ocks.org example 中所见，当带有日刻度的 D3 时间刻度轴跨越年末时，默认刻度生成器有时会绘制不规则间距的刻度。这段代码(也在上面的要点中)导致轴的刻度线每两天间隔一次，除了 12 月 31 日和 1 月 1 日，这两个日期都是绘制的，导致外观不规则。我用红色突出显示了不需要的刻度标签。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
p { width: 600px; margin-bottom: 30px; }
.chart { shape-rendering: crispEdges; }
.axis text { font: 10px sans-serif; }
.axis line, .axis path { fill: none; stroke: black; }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var start_date = "2013-12-21T00:00:00Z",
end_date = "2014-01-07T00:00:00Z",
iso = d3.time.format.iso,
t1 = iso.parse(start_date),
t2 = iso.parse(end_date),
var margin = {top: 0, right: 10, bottom: 20, left: 10},
width = 600 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([t1, t2])
.range([0, width])
var xAxis = d3.svg.axis()
.scale(x)
var svg = d3.select("body").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append('g')
.attr('class', 'x axis')
.call(xAxis)
.selectAll('text')
.attr('fill', function(d) { if(is_problematic(d)) { return "red"; } })
function is_problematic(d) {
return ((d.getDate() == 31) || (d.getDate() == 1));
}
最佳答案
如果您明确设置刻度值，您将避免奇怪的年终四舍五入问题:
var xAxis = d3.svg.axis()
.scale(x)
.tickValues(d3.time.days(t1, t2).filter(function(d, i){ return !(i % 2); }))
关于d3.js - D3 时间轴刻度在年份边界上不规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21296968/
25
4
0
如何使用 plot() 在 XY 图中绘制第二条线，以不同的比例(如本例(紫色线))？ 第一行(红色)我的 R 代码是这样的: p <- sqlQuery(ch,"SELECT wl,param1 F
我正在寻找一种将折线图步骤设置为仅完整数字步骤的方法，例如 1,2,3,4,5..... 目前它看起来像这样: 这些是我的选择。我搜索了很多但找不到解决方案。 let options = {
我的问题是如何将 Y 轴刻度的间隔从 0.2 更改为 0.1？我已经尝试了一切，但我很困!帖子底部堆叠条形图的图片 dpi=600 #pixels per square inch A <- c(
有没有办法根据当前数据集在 D3 轴上动态设置 ticks。我遇到的问题是我的时间范围(x 轴)可能变化很大。对于一些数据集来说，它是几年的值(value)，对于其他数据集来说是几个月，在某些情况下只
我已经使用默认参数创建了一个 dojo 蜘蛛图。我需要隐藏轴标签(刻度上的数据值，而不是轴标题)。 我已经尝试过'ticks: false'，但是它不适用于蜘蛛图。 require(["dojo/_b
有没有一种简单的方法可以在绘图 Axis 上获得自定义缩放比例？ 例如，semilogy 函数提供 {x, log10(y)} 缩放比例，这样就可以自动放大/缩小并自动调整刻度和标签。我想对 {x,
如何修改图形和图表的 y Axis 刻度？我想要这样的东西:my_figure.y_range.end = my_figure.y_range.end * 1.3 所以我想要更高一点的y轴。谢谢! 最
我正在尝试使用 recharts 添加图表一些货币的最新汇率。数据显示正确，但图表始终从 0 开始并略高于最大值。 图表是正确的，但它不需要从 0 开始，因为这样做，它几乎是一条线。 这是图表的图片:
我有一个 SWT Scale 小部件，我需要在刻度上的刻度上添加标签。 有没有办法做到这一点？也许在 slider 小部件上？ 谢谢 最佳答案 这可能不是您所要求的，但您可以在 Scale 小部件旁边
这是一个从 .xlsx 文件中读取数据并利用 Plotly 库绘制气泡图的程序。这是 .xlsx 文件的原始数据: 1991 1992 1993 1994 1995
我这里有一个代码笔 - https://codepen.io/anon/pen/yvgJKB 我有一个简单的堆积条形图。 我想将其制作成一个组件，因此我需要传入值以使其可重用 x 缩放函数返回d.da
让我们看一个基本的演示折线图: jsfiddle $(function () { $('#container').highcharts({ //all the code there 我想强制
是否可以在 t-sql 中获得像 DateTime.Ticks 这样的 C# 内容？ 感谢帮助 最佳答案 您不太可能从 SQL 中获得与 DateTime.Ticks 相同的精度，因为 SQL 不能以
我正在使用 Bokeh 生成散点图，每个 X 值具有不同的 Y 值。当 Bokeh 生成绘图时，它会根据绘制的值的数量自动填充 x 轴间距。我希望 x 轴上的所有值均匀分布，无论单个数据点的数量如何。
我使用下面的代码使用谷歌图表生成折线图 google.charts.load('current', {packages: ['corechart', 'line']});
我正在尝试在 d3 中构建堆积条形图。 这是我的 jsfiddle: http://jsfiddle.net/maneesha/gwjkgruk/4/ 我正在尝试修复它，使 y 轴从零开始。 我认为这
我有一个 d3 时间刻度图表。目前，轴刻度为每个数据对象呈现一个日期。例如，数据的范围可以是 1 天的数据、1 个月内 2 周的数据、5 个月的数据甚至更多。 理想情况下，我们希望显示带有周数的刻度，
当使用“Cassic”折线图时，我可以为 hAxis 分配刻度，还有这样的格式和标题: var options = { hAxis: { format:'h a', title
我的累积折线图没有正确构建 yScale。 给定要构建图表的数据: var data = [{ key: "Page view", values: [ ["2013-07-01 00:
在 y 轴上使用两个具有正常整数值的 DateAxisSeries(x 轴)我的 jqPlot 将 y 刻度呈现两次。 像这样: 2| 2| 1| 1| 0|_____________________
我是一名优秀的程序员,十分优秀！