示例：erics-health.appspot.com
目前，通过查看max / min来设置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>
答案 0 :(得分：2)
解决方案： http://jsfiddle.net/blakedietz/M6ZML/
下次，请提供与您在示例中使用的数据类似的数据或数据。我不得不寻找你网站上数据的形式，我不得不将其重新格式化为浏览器形式，因为你使用d3.csv()需要ajax调用。为了确保您的问题得到妥善回答，请创建一个自包含的示例，以确保那些正在阅读问题的人不必像以前那样做额外的工作。
此代码将帮助您朝着正确的方向前进。基本上，您唯一的问题是您需要设置相应比例的域。这是通过使用以下代码行完成的：
x.domain([start,end]).clamp(true);
从这里开始，无论给予比例的值，只有范围内的值才会映射到使用比例的图表中的可见区域。请注意.clamp(true)。
来自d3 api
scale.clamp（[布尔]）
如果指定了boolean，则相应地启用或禁用钳位。通过 默认情况下，禁用钳位，这样如果输入外的值 domain被传递给scale，scale可能会返回一个值 输出范围通过线性外推。例如，随着 默认域和范围为[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>
与最近的评论相对应：
那是因为你的数据有点搞砸了。如果删除以下数据范围：
{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的线性插值： - ： - 。您需要确定何时将数据分成每天，否则当您从日常信息中移动时，数据将包装。