javascript - 如何使用jquery在图表中显示轴？

Question

我正在尝试使用d3库制作图表。我想在图表中显示轴。我收到错误是我添加此行.call(axisn);..我这样尝试 http://codepen.io/naveennsit/pen/WrZavV?editors=101

我使用了这个api http://d3js.org/

var data=[20,30,70,80];
var widthc=500;
var heightc=500;
var scaleLiner=d3.scale.linear().domain([0,100]).range([0,widthc]);
var axisn=d3.svg.axis().scale(widthc);
var canvas=d3.select('body').append('svg').attr('width',widthc).attr('height',heightc).append('g').attr('transform','translate(50,0)')


canvas.selectAll('rect').data(data).enter().append('rect').attr('width',function(d){ return scaleLiner(d)}).attr('height',50).attr('y',function(d,i){ return i*100})

Answer 1

第一

var data=[20,30,70,80];
var widthc=500;
var heightc=500;
var scaleLiner=d3.scale.linear().domain([0,100]).range([0,widthc]);
var axisn=d3.svg.axis().scale(scaleLiner); 
// while setting axisn, the parameter for scale should be scale instead of width

其次，需要调用axis将它们渲染成svg，如:

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

更多详细信息请参见 tutorial还有这个example