Question

我这里有一个傻瓜 - 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));

我无法让任何一个轴工作 - 任何人都可以帮助

Answer 1

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

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
    })])

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

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

＆＃13;

D3 - 带日期的轴

1 个答案: