Question

我需要使用0：00-23：00作为我的x轴标签。我有var x = d3.time.scale().range[0, width];我想将其域设置为hour_data，这是一个存储时间列表的数组，但无论我尝试d3.domain(d3.extent(hour_data, function(d){ return d.hour;}))还是d3.domain(hour_data.map(function(d){ return d.hour;});，域名都只是保持默认的GMT时间，可以追溯到1969年。

我只需要将小时打印为x轴标签。

请原谅我没有格式化块中的代码。几个小时以来我一直被这个错误所困扰，只是不想在SO上格式化代码块。无论如何，代码很简单。

Answer 1

您可以这样做：

＆＃13;

//this is your data json
var data = [{
  hour: 0,
  value: 10
}, {
  hour: 1,
  value: 10
}, {
  hour: 13,
  value: 10
}, {
  hour: 14,
  value: 20
}, {
  hour: 15,
  value: 20
}]
var width = 700,
  height = 400,
  padding = 100;

// create an svg container
var vis = d3.select("body").
append("svg:svg")
  .attr("width", width)
  .attr("height", height);


// define the x scale (horizontal)

var format1 = d3.time.format("%H");
var xScale = d3.time.scale()
  .nice(d3.time.hour)
  .domain(d3.extent(data, function(d) {
    //conveting the data into date object
    return format1.parse(d.hour + "");
  }))
  .range([padding, width - padding * 2]); // map these the the chart width = total width minus padding at both sides


// define the x axis
var xAxis = d3.svg.axis()
  .ticks(d3.time.hour, 1)
  .tickFormat(function(d) {
    hours = d.getHours();
    return hours;
  }).orient("bottom")
  .scale(xScale);

// draw x axis with labels and move to the bottom of the chart area
vis.append("g")
  .attr("class", "axis") // give it a class so it can be used to select only xaxis labels  below
  .attr("transform", "translate(0," + (height - padding) + ")")
  .call(xAxis);

＆＃13;

body {
  font: 10px sans-serif;
}
.bar rect {
  fill: steelblue;
  shape-rendering: crispEdges;
}
.bar text {
  fill: #fff;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

＆＃13;

希望这有帮助！

Answer 2

需要定义时间轴，如下所示，完整的工作示例代码段

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

var x = d3.time.scale()
.domain([parseTime("00:00"), parseTime("23:00")])
.range([pad, w - pad]);

var w = 960;
var h = 600;
var pad = 80;

var parseTime = d3.time.format("%H:%M").parse;

var data = [{
    "Time": "04:20",
        "Close": 7
}, {
    "Time": "05:20",
        "Close": 8
}, {
    "Time": "06:20",
        "Close": 9
}, {
    "Time": "07:20",
        "Close": 6
}, {
    "Time": "08:20",
        "Close": 5
}, {
    "Time": "09:20",
        "Close": 7
}, {
    "Time": "10:20",
        "Close": 3
}, {
    "Time": "13:20",
        "Close": 8
}, {
    "Time": "15:20",
        "Close": 9
}, {
    "Time": "18:20",
        "Close": 6
}, {
    "Time": "19:20",
        "Close": 5
}, {
    "Time": "21:20",
        "Close": 7
}, {
    "Time": "22:20",
        "Close": 3
}];

data.forEach(function (d) {
    d.Time = parseTime(d.Time);
    d.Close = +d.Close;

});

var x = d3.time.scale()
	.domain([parseTime("00:00"), parseTime("23:00")])
	.range([pad, w - pad]);

var y = d3.scale.linear()
	.domain([0,40])
	.range([h - pad, pad]);

var canvas = d3.select("body")
	.append("svg")
		.attr("class", "chart")
		.attr("width", w)
		.attr("height", h);

var xaxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")  .tickFormat(d3.time.format("%H:%M"));


var yaxis = d3.svg.axis()
	.scale(y)
	.orient("left");

var line = d3.svg.line()
.x(function (d) { return x(d.Time); })
.y(function (d) { return y(d.Close); });


// Add x-axis.
canvas.append("g")
	.attr("class", "axis")
	.attr("transform","translate(0," + (h - pad) + ")")
	.call(xaxis)
	
// Add y-axis
canvas.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + pad + ", 0)")
	.call(yaxis);

canvas.append("path")
	.data([data])
	.attr("d", line).attr("class", "line");

.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;

}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>

<body>
</body>

</html>

D3.time scale保持返回默认值

2 个答案: