D3.js - 在Y軸上顯示刻度值

我想在y軸（％）中寫上刻度（0到100），但是當我使用此代碼時，只顯示一個刻度，沒有數字（％標籤顯示）。D3.js - 在Y軸上顯示刻度值

代碼爲Y軸

var y0 = d3.scale.linear().range([height, 0]); 
    var yAxisLeft = d3.svg.axis() 
      .scale(y0) 
      .orient("left") 
      .tickValues(d3.range(0, 100, 10)); 
    svg.append("g") 
      .attr("class", "y axis") 
      .style("fill", "steelblue") 
      .call(yAxisLeft) 
      .append('text') 
      .text('%');

這是x軸（如預期工作）：

var x = d3.scale.ordinal() 
     .domain(d3.range(m)) 
     .rangeRoundBands([0, width], .08); 
var xAxis = d3.svg.axis() 
     .scale(x) 
     .tickSize(0) 
     .tickPadding(6) 
     .orient("bottom"); 
svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis);

來源

2016-08-23 Sasha

嘗試的ticks(10, "%")代替tickValues(d3.range(0, 100, 10))

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
 
    width = 900- margin.left - margin.right, 
 
    height =450- margin.top - margin.bottom; 
 
    
 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    var y0 = d3.scale.linear().range([height, 0]); 
 
    var yAxisLeft = d3.svg.axis() 
 
      .scale(y0) 
 
      .orient("left") 
 
      .ticks(10, "%"); 
 
      //.tickValues(d3.range(0, 100, 10)); 
 
    svg.append("g") 
 
      .attr("class", "y axis") 
 
      .style("fill", "steelblue") 
 
      .call(yAxisLeft) 
 
      .append('text');

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

來源

2016-08-23 12:11:45

它工作:)。感謝您的幫助。 – Sasha

D3.js - 在Y軸上顯示刻度值

回答

相關問題