Question

大家好我想在d3.js中添加日期我怎么能实现这个我是d3.js的新手当我尝试在X轴上添加整数而不是日期时它工作得很好.. 如何申报日期并分配日期我在这里附加了JS和HTML文件提前谢谢:)

 InitChart();

 function InitChart() {

 /*var lineData = [{
 'x': 1,
 'y': 5
  }, {
 'x': 20,
 'y': 20
 }, {
 'x': 40,
 'y': 10
  }, {
'x': 60,
'y': 40
  }, {
  'x': 80,
  'y': 5
 }, {
  'x': 100,
 'y': 60
 }];*/
var lineData=[{"y": 0.8076999999999999, "x": "2016-01-08 03:01:19.418110"}, {"y": 0.692666666666667, "x": "2016-01-08 05:10:19.838509"}, {"y": 0.5674333333333333, "x": "2016-01-08 09:54:13.022163"}]

var vis = d3.select("#visualisation"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 50
},
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function (d) {
    return d.x;
  }),
  d3.max(lineData, function (d) {
    return d.x;
  })
  ]),

  yRange = d3.scale.linear().range([HEIGHT - MARGINS.top,          MARGINS.bottom]).domain([d3.min(lineData, function (d) {
    return d.y;
  }),
  d3.max(lineData, function (d) {
    return d.y;
  })
]),

xAxis = d3.svg.axis()
  .scale(xRange)
  .tickSize(5)
  .tickSubdivide(true),

yAxis = d3.svg.axis()
  .scale(yRange)
  .tickSize(5)
  .orient("left")
  .tickSubdivide(true);


 vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);

 vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);

var lineFunc = d3.svg.line()
.x(function (d) {
  return xRange(d.x);
})
.y(function (d) {
return yRange(d.y);
})
.interpolate('linear');

vis.append("svg:path")
.attr("d", lineFunc(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");

  }

这是HTML

enter code here
<!DOCTYPE html>
 <html >
 <head>
  <meta charset="UTF-8">
  <title> D3 trial </title>
    <link rel="stylesheet" href="css/style.css">
  </head>
   <body>
   <svg id="visualisation" width="400" height="500"></svg>
   <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>     </script>
  <script src='http://d3js.org/d3.v3.min.js'></script>

    <script src="js/index.js"></script>
    </body>
    </html>

Answer 1

看看here，该示例使用TypeScripit，但概念是相同的。您基本上需要使用d3.time.scale()而不是d3.scale.linear()。您还需要解析日期。更新的xRange应如下所示：

xRange = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(lineData, function (d) { return new Date(d.x); }))

我使用extent函数代替d3.min和d3.max，它具有相同的效果但标注较短。

如何使用D3.js绘制日期图

1 个答案: