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

示例:erics-health.appspot.com

目前，x 轴刻度是通过查看最大值/最小值来设置的。但是，我试图能够定义轴的最小值和最大值。我只想显示晚上 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>

最佳答案

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

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

这段代码将带您走向正确的方向。基本上，您唯一的问题是您需要设置相应比例的域。这是通过使用以下代码行完成的:

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

从这里开始，无论为比例赋予什么值，只有在该范围内的值才会映射到使用比例的图表中的可见区域。请注意.clamp(true)。

来自 d3 API

scale.clamp([boolean])

If boolean is specified, enables or disables clamping accordingly. By default, clamping is disabled, such that if a value outside the input domain is passed to the scale, the scale may return a value outside the output range through linear extrapolation. For example, with the default domain and range of [0,1], an input value of 2 will return an output value of 2. If clamping is enabled, the normalized domain parameter t is clamped to the range [0,1], such that the return value of the scale is always within the scale's output range. If boolean is not specified, returns whether or not the scale currently clamps values to within the output range.

对应的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>

对应最近的评论:

那是因为你的数据有点困惑。如果删除以下范围的数据:

{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:--:-- 发生线性插值。您需要确定何时将数据分成每一天，否则当您从一天到一天的信息移动时，数据将被包装。

关于javascript - 如何配置 d3.js 的 x 轴并手动设置开始/结束时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21422705/

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

上一篇：javascript - jQuery 可拖动小部件不触发拖动事件

下一篇：javascript for 循环进入无限循环