从2015年1月1日开始创建垂直时间线->D3.js中的31DEC15

Create Vertical Timeline from 01JAN15 -> 31DEC15 in D3.js

本文关键字：gt D3 js 31DEC15 中的 时间线 1月 2015年 1日 开始 垂直      更新时间：2023-09-26

我正在寻找在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轴"，并将scale（x）更改为scale（y），但这会给我一个空屏幕。

所以我修改了以下内容：

  • svg.append（"g"）.调用行，并将方向从"bottom"更改为"left"
  • d3.time.scale（）。范围从[0，width]到[height，0]

问题解决了。垂直时间线。

相关文章：