使用d3.js仅显示特定的小时数

我正在以10分钟为间隔，10天为长度绘制股票价格图表。当然，股市只在9:30到4点之间开放。如何仅显示图表中上午9:30到4点之间的部分？例如谷歌财务图表

---

我猜你不仅想显示9:30到4:00之间的图表部分，还想显示每天的范围

您可以通过将剩余的小时压缩到范围的相同部分来实现这一点，这可以通过利用d3刻度可以取一个范围的值来实现。例如，假设我有以下数据：

var data = [
    {x:0, y:2},{x:0.5, y:2.2},{x:1.3,y:5},{x:2.0,y:3},
    {x:10,y:2},{x:10.7,y:4.6},{x:11.3,y:0},{x:12,y:2}
    ];

我的数据只有[0,2]和[10,12]范围内的值，因此我只想显示这些值

我首先设置x值的比例，如下所示：

var xscale = d3.scale.linear()

现在我需要设置域

    .domain([0,2,10,12])

这将我的域有效地分成三部分：[0,2]、[2,10]和[10,12]。如果我同样给出了一个包含四个值的数组的范围，我可以构建一个分段线性比例。假设我有一个500x500 SVG，我正在其中绘制。我希望将域中每个有趣的部分映射到svg的一半，在边缘添加一点填充，并将整个无聊的中间部分映射到一个值。为此，我提供以下范围：

    .range([10,250,250,490])

现在，在分段线性标度上有以下三个映射：[0,2]->[10250]，[2,10]->[250250]和[10,12]->[250490]。我已经有效地切断了我的域名的中间部分

我还需要修正刻度值，因为如果我用x轴绘制，d3将不会足够聪明，不会尝试为我折叠成单个像素的域部分绘制任何值。我可以通过显式声明我的刻度值来实现这一点：

var xAxis = d3.svg.axis()
    .scale(xscale)
    .orient('bottom')
    .tickValues([0,1,2,11,12])

我已经创建了一个简单的例子，同样的方法可以应用于路径而不是圆，以获得示例中所示的效果

---

为了使其美观、可读并可扩展到多天，您只需编写函数来生成域、范围和刻度值数组，虽然在不同的时间段中添加一些线性分隔符会使事情变得更简单。

最简单的方法可能是在数据中只包含这些小时。事实就是这样，没有市场未开放的时间的数据。啊，对了，对不起，现在有你了。你可以使用分类的时间尺度，尽管这会让其他东西有点笨重。只使用d3.time.scale（）来持续时间轴谢谢，这帮了大忙。我有一个问题。刻度显示为时间戳，如“1373646600021”。我不知道如何使它们成为日期。您可以使用

date=new date（time）

从日期的时间戳转换，

var format=d3.time.format（“%c”）

或其他类似格式来构建d3时间格式化程序，然后使用

format（date）

转换为日期。有关更多信息，请参阅d3.time模块。您可能还想查看d3时间刻度，我相信它内置了时间格式，尽管我没有使用它们..tickFormat（d3.time.format（'%x'））有效。

var xAxis = d3.svg.axis()
    .scale(xscale)
    .orient('bottom')
    .tickValues([0,1,2,11,12])