Javascript 在D3.js中从2015年1月1日->2015年12月31日创建垂直时间线_Javascript_D3.js_Timeline

Javascript 在D3.js中从2015年1月1日->2015年12月31日创建垂直时间线

javascript d3.js

Javascript 在D3.js中从2015年1月1日->2015年12月31日创建垂直时间线,javascript,d3.js,timeline,Javascript,D3.js,Timeline,我正在寻找在D3.js中创建从2015年1月1日到2015年12月底的垂直时间线所需的代码。我想通过JSON为中间的任意两个日期添加两个条目，并用彩色圆圈表示。画布可以是任何大小，我对刻度和轴没有偏好，只要它以某种方式显示日期我已经在下面的例子中创建了一个水平的，但我不知道如何才能显示一个垂直的这是一个我已经能够开始使用的示例 <!DOCTYPE html> <meta charset="utf-8"> <style> .axis text { fo

我正在寻找在D3.js中创建从2015年1月1日到2015年12月底的垂直时间线所需的代码。我想通过JSON为中间的任意两个日期添加两个条目，并用彩色圆圈表示。画布可以是任何大小，我对刻度和轴没有偏好，只要它以某种方式显示日期

我已经在下面的例子中创建了一个水平的，但我不知道如何才能显示一个垂直的

这是一个我已经能够开始使用的示例

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

.axis text {
  font: 10px sans-serif;
}

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

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var format = d3.time.format("%Y-%m-%d");
var startDate = format.parse("2015-01-01");
var endDate = format.parse("2015-12-31");

var margin = {top: 100, right: 100, bottom: 100, left: 100},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .domain([startDate, endDate])
    .nice(d3.time.month)
    .range([0, width]);

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

svg.append("g")
    .attr("class", "x axis")
    .call(d3.svg.axis().scale(x).orient("bottom"));

</script>

我假设我可以在svg.append调用中用y轴替换x轴，然后将scalex更改为scaley，但这会给我一个空屏幕。

因此我修改了以下内容：

svg.appendg.call行，并将方向从下向左更改 d3.时间刻度范围从[0，宽度]到[0，高度] 问题解决了。垂直时间线。

翻转x和y坐标。