D3 - 带日期的轴

问题描述 投票:1回答:1

我这里有一个傻瓜 - https://plnkr.co/edit/FOsIWASEDLHhypatomrt?p=preview

它非常基本,我只是想创建轴

数据将采用plunker中的格式

我的y轴是0到数据中的最高数字。

x轴应该是日期。

chart.append('g')
  .classed('x axis', true)
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x)
    .tickFormat(d3.timeFormat("%Y-%m-%d")))

chart.append('g')
  .classed('y axis', true)
  .call(d3.axisLeft(y)
    .ticks(10));  

我不能让任何一个轴工作 - 任何人都可以帮忙

d3.js
1个回答
4
投票

对于您的时间尺度,您需要将字符串转换为日期对象,最简单的方法是将您的比例定义为:

var x = d3.scaleTime()
  .domain(d3.extent(data, function(d) { 
    return new Date(d.date); 
  }))
  .range([0, width]);

对于y轴,问题在于如何定义比例域。您的数据采用以下形式:

var data = [
   {
      "one":4306,
      "two":2465,
      "three":2299,
      "four":988,
      "five":554,
      "six":1841,
      "date":"2015-05-31T00:00:00"
   },

但您的比例域设置为:

.domain([0, d3.max(data, function(d){
    return d;
  })

d这里是一个对象,具有上面列出的属性。您可以将其设置为其中一个属性的最大值:

.domain([0, d3.max(data, function(d){
    return d.one;
  })

或者通过一些修改,达到整体最高:

  .domain([0, d3.max(data, function(d){
    var a = [d.one,d.two,d.three,d.four,d.five,d.six]; // properties to check
    return d3.max(a);  // overall max
    })])

这是一个显示你的轴在行动的片段:

let keys = [];
let legendKeys = [];

var w = 800;
var h = 450;

var margin = {
  top: 30,
  bottom: 40,
  left: 50,
  right: 20,
}

var width = w - margin.left - margin.right
var height = h - margin.top - margin.bottom

var colors = [
  '#FFEBB6','#FFC400','#B4EDA0','#FF4436','#FF9A00'];

var data = [
   {
      "one":4306,
      "two":2465,
      "three":2299,
      "four":988,
      "five":554,
      "six":1841,
      "date":"2015-05-31T00:00:00"
   },
   {
      "one":4378,
      "two":2457,
      "three":2348,
      "four":1021,
      "five":498,
      "six":1921,
      "date":"2015-06-30T00:00:00"
   },
   {
      "one":3404,
      "two":2348,
      "three":1655,
      "four":809,
      "five":473,
      "six":1056,
      "date":"2015-07-31T00:00:00"
   },
]

legendKeys = ['New', 'Used']

var x = d3.scaleTime()
  .domain(d3.extent(data, function(d) { 
    return new Date(d.date); 
  }))
  .range([0, width]);

var y = d3.scaleLinear()
  .domain([0, d3.max(data, function(d){
    var a = [d.one,d.two,d.three,d.four,d.five,d.six];
    return d3.max(a)
    })])
  .range([height, 0]);

var svg = d3.select('body').append('svg')
  .attr('class', 'chart')
  .attr('width', w)
  .attr('height', h);

var chart = svg.append('g')
  .classed('graph', true)
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  
  
chart.append('g')
  .classed('x axis', true)
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x)
    .tickFormat(d3.timeFormat("%Y-%m-%d")).tickValues(data.map(function(d) { return new Date(d.date)}) ))
    ;

chart.append('g')
  .classed('y axis', true)
  .call(d3.axisLeft(y)
    .ticks(10));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.