Question

我正在寻找在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>

我以为我可以换掉＆＃34; x轴＆＃34;使用＆＃34; y轴＆＃34;在svg.append调用中，将scale（x）更改为scale（y），但这会给我一个空屏幕。

Answer 1

所以我修改了以下内容：

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

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

从01JAN15创建垂直时间轴 - ＆gt; D3.js中的31DEC15

1 个答案: