축이 표시되지 않고 정렬되지 않았습니다.

아래 코드는 원과 x 축을 그립니다. 몇 가지 문제가 있습니다. Y 축이 표시되는 것은 아니고, 그것이 추가 될 :축이 표시되지 않고 정렬되지 않았습니다.

svgContainer.append('g') 
     .attr("class", "axis") 
     .call(yAxis);

는 X 축 하단에 정렬되지 않고, I는 아래쪽 방향 설정 여기

orient("bottom").ticks(5);

것은 완전한 코드 :

<!DOCTYPE html> 
<html> 
<head> 

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 

</head> 

<body> 
    <script> 

     var svgContainer = d3.select("body").append("svg") 
       .attr("width", 1000) 
       .attr("height", 1000); 

     var circle = svgContainer.append("circle") 
       .attr("cx", 150) 
       .attr("cy", 150) 
       .attr("r", 100) 
       .attr("fill", "none") 
       .attr("stroke" , "red") 
       .attr("stroke-width" , 2); 

     var x = d3.scale.linear().range([0, 1000]); 
     var y = d3.scale.linear().range([0, 1000]); 

     var xAxis = d3.svg.axis().scale(x) 
       .orient("bottom").ticks(5); 

     var yAxis = d3.svg.axis().scale(y) 
       .orient("left").ticks(5); 

     svgContainer.append('g') 
       .attr("class", "axis") 
       .call(xAxis); 

     svgContainer.append('g') 
       .attr("class", "axis") 
       .call(yAxis); 

    </script> 

</body> 

</html>

바이올린 :

http://jsfiddle.net/zzz8svuq/1/ 왜 이러한 문제가 발생하는?

출처

2014-09-15 blue-sky

방향을 설정하면 축선에 대한 레이블의 배치에만 영향을 미치므로 D3은 자동으로 축을 캔버스에 배치하지 않습니다.

svgContainer.append('g') 
      .attr("class", "axis") 
      .attr("transform", "translate(" + margin + "," + (1000 - margin) + ")") 
      .call(xAxis); 

svgContainer.append('g') 
      .attr("class", "axis") 
      .attr("transform", "translate(" + margin + ",0)") 
      .call(yAxis);

전체 데모 here을이 일반적으로 수행되는 방법은 축에 여백을 설정하고 그에 따라 컨테이너를 상쇄하는 것입니다.

출처

2014-09-15 14:42:13

주목 y 축을 잘못 스케일링하여 var y = d3.scale.linear(). range ([1000, 0]); var y = d3.scale.linear() 대신 range ([0, 1000]); –

축이 표시되지 않고 정렬되지 않았습니다.

답변

관련 문제