如何配置 x 轴并手动设置 d3.js 的开始/结束时间答案

【问题标题】：How to configure x-axis and manually set start/end time for d3.js如何配置 x 轴并手动设置 d3.js 的开始/结束时间
【发布时间】：2014-01-29 05:17:08
【问题描述】：

此处的示例：erics-health.appspot.com

目前，x 轴刻度是通过查看 max/min 来设置的。但是，我试图能够定义轴的最小值和最大值。我只想显示从晚上 8 点到上午 10 点的数据。我可能有超出这些范围的数据，但我不希望它显示在图表中。

谢谢！

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.area {
  fill: steelblue;
}

</style>
<body>
<script src="js/d3.js"></script>
<script>

var data = [
  {date : "22:34:00", close : 1.55145},
  {date : "22:40:00", close : 0.7433334},
  {date : "22:46:00", close : 0.74002784},
  {date : "22:51:00", close : 0.8358186},
  {date : "22:57:00", close : 0.8453624},
  {date : "23:03:00", close : 1.1331508},
  {date : "23:09:00", close : 1.0483232},
  {date : "23:15:00", close : 0.3787978},
  {date : "23:21:00", close : 0.028143013},
  {date : "23:27:00", close : 0.02481636},
  {date : "23:32:00", close : 0.024784887},
  {date : "23:38:00", close : 0.028799044},
  {date : "23:44:00", close : 0.028170206},
  {date : "23:50:00", close : 0.025131205},
  {date : "23:56:00", close : 0.11552841},
  {date : "0:02:00", close : 0.29101047},
  {date : "0:07:00", close : 0.29101828},
  {date : "0:13:00", close : 0.15327774},
  {date : "0:19:00", close : 0.12934181},
  {date : "0:25:00", close : 0.15818097},
  {date : "0:31:00", close : 0.14875501},
  {date : "0:37:00", close : 0.14916791},
  {date : "0:43:00", close : 0.08311816},
  {date : "0:48:00", close : 0.3359427},
  {date : "0:54:00", close : 0.12637037},
  {date : "1:00:00", close : 0.02719137},
  {date : "1:06:00", close : 0.027614024},
  {date : "1:12:00", close : 0.030077167},
  {date : "1:18:00", close : 0.031363245},
  {date : "1:23:00", close : 0.024196008},
  {date : "1:29:00", close : 0.10927427},
  {date : "1:35:00", close : 0.066115},
  {date : "1:41:00", close : 0.09814477},
  {date : "1:47:00", close : 0.62218755},
  {date : "1:53:00", close : 0.6253947},
  {date : "1:58:00", close : 0.15986814},
  {date : "2:04:00", close : 0.15649848},
  {date : "2:10:00", close : 0.083005086},
  {date : "2:16:00", close : 0.027678054},
  {date : "2:22:00", close : 0.025061065},
  {date : "2:28:00", close : 0.027554804},
  {date : "2:34:00", close : 0.14941628},
  {date : "2:39:00", close : 0.14944676},
  {date : "2:45:00", close : 0.026169432},
  {date : "2:51:00", close : 0.22071813},
  {date : "2:57:00", close : 0.057087168},
  {date : "3:03:00", close : 0.05648345},
  {date : "3:09:00", close : 0.05211234},
  {date : "3:14:00", close : 0.3934766},
  {date : "3:20:00", close : 0.39347196},
  {date : "3:26:00", close : 0.90130115},
  {date : "3:32:00", close : 0.90089816},
  {date : "3:38:00", close : 0.03359231},
  {date : "3:44:00", close : 0.18505707},
  {date : "3:49:00", close : 0.026783684},
  {date : "3:55:00", close : 0.13720763},
  {date : "4:01:00", close : 0.09140902},
  {date : "4:07:00", close : 0.031246372},
  {date : "4:13:00", close : 0.024439864},
  {date : "4:19:00", close : 0.27394825},
  {date : "4:25:00", close : 0.2739199},
  {date : "4:30:00", close : 0.19392326},
  {date : "4:36:00", close : 0.23098093},
  {date : "4:42:00", close : 0.15341641},
  {date : "4:48:00", close : 0.033248696},
  {date : "4:54:00", close : 0.026490664},
  {date : "5:00:00", close : 0.113400206},
  {date : "5:05:00", close : 0.11344097},
  {date : "5:11:00", close : 0.024459623},
  {date : "5:17:00", close : 0.17521942},
  {date : "5:23:00", close : 0.13070703},
  {date : "5:29:00", close : 0.055239253},
  {date : "5:35:00", close : 0.032200478},
  {date : "5:40:00", close : 0.027074447},
  {date : "5:46:00", close : 0.022963678},
  {date : "5:52:00", close : 0.07365599},
  {date : "5:58:00", close : 0.0737282},
  {date : "6:04:00", close : 0.027280098},
  {date : "6:10:00", close : 0.02937219},
  {date : "6:16:00", close : 1.0709208},
  {date : "6:21:00", close : 1.3994151},
  {date : "6:27:00", close : 0.91793543},
  {date : "6:33:00", close : 1.9869174},
  {date : "6:39:00", close : 0.7651712},
  {date : "6:45:00", close : 0.70828897},
  {date : "6:51:00", close : 3.8604095}
];


var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 1920 - margin.left - margin.right,
    height = 1000 - margin.top - margin.bottom;

var parseDate = d3.time.format("%H:%M:%S").parse;

    data = data.map(function(datum)
{
  var bundle = datum;

  bundle.date  = parseDate(datum.date);
  bundle.close = datum.close;

  return bundle;
});


var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
//  .tickFormat(d3.time.format('%I %p'))
//  .tickValues([]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.close); });

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 + ")");

  x.domain(d3.extent(data, function(d) { return d.date; }));
  //x.domain([d3.max(data, function(d) { return d.date; }), d3.min(data, function(d) { return d.date; })]);
  y.domain([0, d3.max(data, function(d) { return d.close; })]);

  svg.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

</script>
</body>

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

解决方案： http://jsfiddle.net/blakedietz/M6ZML/

下次，请提供与您在示例中使用的数据相似的数据或数据。我不得不在您的网站上寻找数据的形式，并且由于您使用的是需要 ajax 调用的d3.csv()，因此我不得不将其重新格式化为浏览器形式。为确保您的问题能够得到正确回答，请创建一个自包含的示例，以确保阅读问题的人不必像我一样做额外的工作。

此代码将使您朝着正确的方向前进。基本上，您唯一的问题是您需要设置相应比例的域。这是通过使用以下代码行来完成的：

x.domain([start,end]).clamp(true);

从这里开始，无论给定刻度的值是多少，只有范围内的值才会映射到使用刻度的图表中的可见区域。请注意.clamp(true)。

来自 d3 api

scale.clamp([boolean])

如果指定了布尔值，则相应地启用或禁用钳位。经过默认情况下，钳位是禁用的，这样如果输入之外的值域被传递给刻度，刻度可能会返回一个外部的值通过线性外推的输出范围。例如，与默认域和范围为 [0,1]，输入值为 2 将返回输出值为 2。如果启用钳位，则归一化域参数 t 被限制在 [0,1] 范围内，使得返回值秤的输出始终在秤的输出范围内。如果布尔值是未指定，返回刻度当前是否夹紧值在输出范围内。

对应的jsfiddle代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.area {
  fill: steelblue;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var data = [
  {date : "22:34:00", close : 1.55145},
  {date : "22:40:00", close : 0.7433334},
  {date : "22:46:00", close : 0.74002784},
  {date : "22:51:00", close : 0.8358186},
  {date : "22:57:00", close : 0.8453624},
  {date : "23:03:00", close : 1.1331508},
  {date : "23:09:00", close : 1.0483232},
  {date : "23:15:00", close : 0.3787978},
  {date : "23:21:00", close : 0.028143013},
  {date : "23:27:00", close : 0.02481636},
  {date : "23:32:00", close : 0.024784887},
  {date : "23:38:00", close : 0.028799044},
  {date : "23:44:00", close : 0.028170206},
  {date : "23:50:00", close : 0.025131205},
  {date : "23:56:00", close : 0.11552841},
  {date : "0:02:00", close : 0.29101047},
  {date : "0:07:00", close : 0.29101828},
  {date : "0:13:00", close : 0.15327774},
  {date : "0:19:00", close : 0.12934181},
  {date : "0:25:00", close : 0.15818097},
  {date : "0:31:00", close : 0.14875501},
  {date : "0:37:00", close : 0.14916791},
  {date : "0:43:00", close : 0.08311816},
  {date : "0:48:00", close : 0.3359427},
  {date : "0:54:00", close : 0.12637037},
  {date : "1:00:00", close : 0.02719137},
  {date : "1:06:00", close : 0.027614024},
  {date : "1:12:00", close : 0.030077167},
  {date : "1:18:00", close : 0.031363245},
  {date : "1:23:00", close : 0.024196008},
  {date : "1:29:00", close : 0.10927427},
  {date : "1:35:00", close : 0.066115},
  {date : "1:41:00", close : 0.09814477},
  {date : "1:47:00", close : 0.62218755},
  {date : "1:53:00", close : 0.6253947},
  {date : "1:58:00", close : 0.15986814},
  {date : "2:04:00", close : 0.15649848},
  {date : "2:10:00", close : 0.083005086},
  {date : "2:16:00", close : 0.027678054},
  {date : "2:22:00", close : 0.025061065},
  {date : "2:28:00", close : 0.027554804},
  {date : "2:34:00", close : 0.14941628},
  {date : "2:39:00", close : 0.14944676},
  {date : "2:45:00", close : 0.026169432},
  {date : "2:51:00", close : 0.22071813},
  {date : "2:57:00", close : 0.057087168},
  {date : "3:03:00", close : 0.05648345},
  {date : "3:09:00", close : 0.05211234},
  {date : "3:14:00", close : 0.3934766},
  {date : "3:20:00", close : 0.39347196},
  {date : "3:26:00", close : 0.90130115},
  {date : "3:32:00", close : 0.90089816},
  {date : "3:38:00", close : 0.03359231},
  {date : "3:44:00", close : 0.18505707},
  {date : "3:49:00", close : 0.026783684},
  {date : "3:55:00", close : 0.13720763},
  {date : "4:01:00", close : 0.09140902},
  {date : "4:07:00", close : 0.031246372},
  {date : "4:13:00", close : 0.024439864},
  {date : "4:19:00", close : 0.27394825},
  {date : "4:25:00", close : 0.2739199},
  {date : "4:30:00", close : 0.19392326},
  {date : "4:36:00", close : 0.23098093},
  {date : "4:42:00", close : 0.15341641},
  {date : "4:48:00", close : 0.033248696},
  {date : "4:54:00", close : 0.026490664},
  {date : "5:00:00", close : 0.113400206},
  {date : "5:05:00", close : 0.11344097},
  {date : "5:11:00", close : 0.024459623},
  {date : "5:17:00", close : 0.17521942},
  {date : "5:23:00", close : 0.13070703},
  {date : "5:29:00", close : 0.055239253},
  {date : "5:35:00", close : 0.032200478},
  {date : "5:40:00", close : 0.027074447},
  {date : "5:46:00", close : 0.022963678},
  {date : "5:52:00", close : 0.07365599},
  {date : "5:58:00", close : 0.0737282},
  {date : "6:04:00", close : 0.027280098},
  {date : "6:10:00", close : 0.02937219},
  {date : "6:16:00", close : 1.0709208},
  {date : "6:21:00", close : 1.3994151},
  {date : "6:27:00", close : 0.91793543},
  {date : "6:33:00", close : 1.9869174},
  {date : "6:39:00", close : 0.7651712},
  {date : "6:45:00", close : 0.70828897},
  {date : "6:51:00", close : 3.8604095}
];


var margin = {top: 20, right: 20, bottom: 30, left: 50},
     width = 1920 - margin.left - margin.right,
    height = 1000 - margin.top - margin.bottom;

var parseDate = d3.time.format("%H:%M:%S").parse;

data = data.map(function(datum)
{
  var bundle = datum;

  bundle.date  = parseDate(datum.date);
  bundle.close = datum.close;

  return bundle;
});

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.close); });

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 start = new Date(1900, 0, 1, 8, 0, 0, 0);
var end = new Date(1900, 0, 1, 10, 0, 0, 0);

var uniqueDays = [];

data.forEach(function(element)
{
  var day = element.date.getDay();

  var isUnique = checkIfUnique(day);

  if (uniqueDays.length == 0 || isUnique)
  {
    uniqueDays.push(day);
  } 

  function checkIfUnique(day)
  {
    var flag = true;
    uniqueDays.forEach(function(element)
    {
      if (element == day)
      {
        flag = false;
      }
    })

    return flag;
  }
});


var xDomain = [start,end];

  x.domain(xDomain).clamp(true);
  y.domain([0, d3.max(data, function(d) { return d.close; })]);

  svg.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

</script>
</body>

对应最近的cmets：

那是因为您的数据有点混乱。如果删除以下数据范围：

{date : "22:34:00", close : 1.55145},   {date : "22:40:00", close :
0.7433334},   {date : "22:46:00", close : 0.74002784},   {date : "22:51:00", close : 0.8358186},   {date : "22:57:00", close :
0.8453624},   {date : "23:03:00", close : 1.1331508},   {date : "23:09:00", close : 1.0483232},   {date : "23:15:00", close :
0.3787978},   {date : "23:21:00", close : 0.028143013},   {date : "23:27:00", close : 0.02481636},   {date : "23:32:00", close :
0.024784887},   {date : "23:38:00", close : 0.028799044},   {date : "23:44:00", close : 0.028170206},   {date : "23:50:00", close :
0.025131205},   {date : "23:56:00", close : 0.11552841},   {date : "0:02:00", close : 0.29101047},

范围内不会有任何东西。此外，如果您添加以下数据，您将看到该范围内的数据。

  {date : "8:20:00", close : 3.8604095},
  {date : "8:22:00", close : 5.04095},
  {date : "9:20:00", close : 3.8604095},
  {date : "9:22:00", close : 5.04095},
  {date : "10:22:00", close : 1.04095},

我认为您缺少域的整个概念。如果您的函数没有您感兴趣的域范围内的任何信息，那么您将不会显示该信息。

但是，在您的情况下，您的信息超出了同一天的范围。从 22:--:-- 到 23:--:-- 的范围导致从 6:51:00 到 22:--:-- 发生线性插值。您需要确定何时将数据分成每一天，否则当您从一天到一天的信息移动时，数据将被包装。

【讨论】：

感谢 Arete 并为没有粘贴代码表示歉意！所以我已经使用了你的建议，但现在似乎没有发布 y 值？它只是从最小 x 处的第一个 y 值到最大 x 处的最后一个 y 值绘制一条线。