D3.js - Y軸のティック値を表示

y軸のティックを％（0〜100）で書き込もうとしていますが、このコードを使用すると数字は表示されません％ラベルが表示されます）。 Y軸のD3.js - 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軸のティック値を表示

答えて

関連する問題