- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在使用 d3.time.scale()
(引用 here )创建时间刻度并使用 axis.tickValues([values])
提供刻度值(here)。为 [values] 中提供的指定 Date 对象呈现刻度。
一切正常,但刻度值表示总是在浏览器的当前时区。现在需要在特定时区(例如“亚洲/加尔各答”)显示它。有没有办法做到这一点?我看到的最大选项是用于格式化刻度,而不是用自定义值替换它们,这对这种情况没有帮助。
编辑:这可以使用像 moment.js 这样的外部库来实现,但如果可以避免的话,这是首选。
最佳答案
基于 Mark 的解决方案,这是一个不使用外部库的可行解决方案。在文本字段中输入时区 ID(例如 - 欧洲/柏林)。
// Set the dimensions of the canvas / graph
var margin = {
top: 30,
right: 20,
bottom: 100,
left: 50
},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var currentTZ = "local";
// 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(10)
.tickFormat(function (d) {
if (currentTZ === "local") return d3.time.format('%X')(d);
else {
console.log(currentTZ);
return d3.time.format('%X')(new Date(d.toLocaleString('en-US', {
timeZone: currentTZ
})));
}
});
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.close);
});
// Adds the svg canvas
var svg = 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 + ")");
var data = [{
date: new Date(0),
close: Math.random() * 100
}, {
date: new Date(1800000),
close: Math.random() * 100
}, {
date: new Date(3600000),
close: Math.random() * 100
}, {
date: new Date(5400000),
close: Math.random() * 100
}, {
date: new Date(7200000),
close: Math.random() * 100
}, {
date: new Date(9000000),
close: Math.random() * 100
}, {
date: new Date(10800000),
close: Math.random() * 100
}, {
date: new Date(12600000),
close: Math.random() * 100
}]
// Scale the range of the data
x.domain(d3.extent(data, function (d) {
return d.date;
}));
y.domain([0, d3.max(data, function (d) {
return d.close;
})]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function (d) {
return "rotate(-65)"
});
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
handleClick = function () {
currentTZ = document.getElementById('timeZ').value;
console.log(currentTZ)
svg.selectAll("g.x.axis")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function () {
return "rotate(-65)"
});
};
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<input name="Submit" type="submit" value="Change Time" onClick="handleClick()">
<input type="text" id="timeZ" value="local">
</form>
关于javascript - d3.js 中具有特定时区的时间轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33388547/
目录 效果图 思路 具体实现 步骤一:ItemView顶部偏移 步骤二:绘制圆和线条 注意:下标的获取 流程类的绘制
我正在尝试构建一个时间轴,但是当我点击其中一个圆圈时我无法实现该功能事件的绿色条已完成,或者如果我点击前一个圆圈则“禁用”, 我的代码 CodePen 我尝试过的 Toggle var compl
我最近开始使用 JavaFx 2.0,也许我的问题很基本,但目前我不知道如何解决它。例如,假设我有一个名为 Clock 的小型演示应用程序: import javafx.animation.KeyFr
我需要创建一个基于自定义 HTML5 的控件,该控件是时间线和甘特图之间的交叉: 但是,我无法获得市场上已有的第三方控件来减少一些开发时间。它需要在顶部有微型缩小的时间轴以进行快速导航,滚动时会更新主
你好,我已经为 twitter 时间线编写了一个脚本,除了我不知道如何授权我的 twitter api key ,我的 led 标志只是说“错误的身份验证数据” 这是我的代码 #!/usr/bin/p
我正在使用 X 时间轴绘制一个非常规则的图表。轴代码非常标准: var xScale = d3.time.scale() .domain([tlState.startd
谁能帮我解释一下如何使用图形 api 发布带有照片(不是一张照片)的状态; 我尝试将照片添加到 me/photos 但我不需要查看以前帖子中的照片。 当我使用类似 TIMELINE_ALBUM/pho
我正在使用来自 here 的时间轴插件 这是我当前的代码: 1940s 1950s 1960s 1970s 1980s 1990s 2000s 1940's Ronald. 1950's
我有一些事件:有些是连续的,有些只是一天的事件。 我想在网页上精美地展示它们。有一堆日期选择器 jQuery 插件,但我找不到任何用于显示事件的插件。 可以是canvas,也可以是svg,也可以是cs
我正在尝试创建一个响应式时间轴,它的行为类似于 ( https://codepen.io/anon/pen/KoGdqG): 对于大于 600px 的宽度是水平的。每个部分的宽度是响应式的; 对于小于
在我复制并粘贴来自 https://mdbootstrap.com/plugins/jquery/timeline/#images 的代码之后,为什么图像看起来很大,我该怎么做才能使左侧和右侧的内容变
我想创建一个垂直的动态时间轴,左边是发生的时间,右边是发生的事情,中间有一条线,每个事件的线上都有一个气泡。时间、事件和事件数量将是动态的。 我在这里想的可能是垂直线的静态图像上的 RecyclerV
我正在尝试重新创建以下内容: 我有以下代码,其中包含它的要点,但不是确切的外观和感觉,我仍在尝试掌握 Swift 的 UI 方面。 VStack(spacing: 30) {
在使用下面的代码使用 AngularJS 生成时间线图表时,我遇到了一个问题。 基本上我无法找到导入时间线包的正确方法。就像下面导入 corechart 包一样,我如何导入时间线... google.
我正在尝试使用 javascript 或 jquery 在我的 Twitter 时间轴上动态设置 href 字段,我该如何执行此操作? Tweets by me 最佳答案 使用setAttribut
时间轴跟踪文件介绍如下: https://www.tensorflow.org/versions/r1.1/performance/xla/jit 这对于性能分析似乎很有用。但有一点我不明白。 1、“
我正在使用 d3 Timeline 插件 ( https://github.com/jiahuang/d3-timeline ),我终于得到了可视化可以读取我的数据的地方。但是,我现在需要使特定学生的
我正在尝试使用 Google 的时间轴创建一个图表来显示过去 7 天的事件,但我在缩放 x 轴时遇到了问题。 图表总是试图根据数据自动缩放,这破坏了我想要合并的一致性。我希望图表的右侧是今天的日期,左
获取多个 KML 文件(每个文件代表不同的日期)并创建带有 slider 的 Google map 的最佳方法是什么? 最佳答案 尝试http://code.google.com/p/timemap/
我一直在尝试为预定的事件构建一个网络显示。每个事件都有一个动态计算的宽度(基于事件持续时间)和 margin-left(基于开始时间)。每个事件也有一个高度,基于需要显示的内容。如果没有重叠事件将元素
我是一名优秀的程序员,十分优秀!