【问题标题】:how to change x axis in D3?如何更改 D3 中的 x 轴?
【发布时间】:2016-02-23 19:55:13
【问题描述】:

我尝试创建一个条形图,显示一年中每个月的天数。我想改变条形图x轴的数字,结果发现数字是从0开始到11结束,而不是1到12。请问如何解决这个问题?

    //x 
var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, width - padding.left - padding.right]);

//y 
var yScale = d3.scale.linear()
    .domain([0,d3.max(dataset)])
    .range([height - padding.top - padding.bottom, 0]);

//the define of x
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

//define of y
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");


/add x
svg.append("g")
    .attr("class","axis")
    .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
    .call(xAxis); 

【问题讨论】:

  • xScale设置不同的域。
  • 我也想更改域.. bur 它也会移动栏项目。更喜欢在 xaxis 上使用 tickformat() 更改标签

标签: javascript d3.js


【解决方案1】:

使用 tickformat() 将轴标签格式化为:

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(function(d) { return d + 1; }); //make changes here relevant to ur data

【讨论】:

  • 我能再问你一个问题吗?如果我想将月份数更改为“一月,二月”之类的内容,我该怎么做?
  • 创建一个月份数组:var months = ["Jan","Feb"... and .tickFormat(function(d) { return months[d]; });
  • 谢谢!你的建议真的很有帮助!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-31
  • 1970-01-01
  • 1970-01-01
  • 2012-05-20
相关资源
最近更新 更多