Как сделать пересекающиеся оси на d3.js?

306

05 апреля 2017, 16:20

Добрый день! Создаю стандартные оси OX, OY. Все замечательно, но нулевая точка обозначается по каждой из осей, причем текст пересекается самой осью. Есть ли хорошие способы либо в принципе убрать одну из засечек, либо передвинуть текст? (использую 4-ую версию библиотеки) Изменения в 4-ой версии

Документация

var xScale = d3.scaleLinear() 
  .domain([-2, 2]) 
  .range([-200, 200]); 
 
var yScale = d3.scaleLinear() 
  .domain([-2, 2]) 
  .range([200, -200]); 
 
var xAxis = d3.axisBottom() 
  .scale(xScale) 
  .ticks(8); 
 
var yAxis = d3.axisLeft() 
  .scale(yScale) 
  .ticks(8); 
 
d3.select("svg").append("g") 
  .attr("transform", "translate(" + 250 + "," + 250 + ")") 
  .call(xAxis); 
 
d3.select("svg").append("g") 
  .attr("transform", "translate(" + 250 + "," + 250 + ")") 
  .call(yAxis);

<!DOCTYPE html> 
<html> 
 
<head> 
  <script src="https://d3js.org/d3.v4.min.js"></script> 
</head> 
 
<body> 
  <svg width="500" height="500"> 
     </svg> 
</body> 
 
</html>

Answer 1

Может SVG попробовать?

<?xml version="1.0" encoding="utf-8" standalone="no"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<body> 
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
       width="420px" height="420px" viewbox="0 0 420 420" > 
   
    <defs> 
       <pattern id="pattern1" 
           x="0" y="0" width="20" height="20" 
           patternUnits="userSpaceOnUse" > 
		    
          <g fill="none" stroke-width="1px" stroke="#CCCCCC"> 
           <rect x="0" y="0" width="10" height="10" /> 
           <rect x="10" y="10" width="10" height="10" /> 
          </g>  
		    </pattern>  
			 
     <marker id="MarkerArrow"    refX="0" refY="2" 
             markerUnits="strokeWidth" orient="auto" 
        markerWidth="10" markerHeight="10" > 
        <polyline id="markerPoly1" points="0,0 10,2 0,4 2,2 0,0" 
         fill-opacity="0.7" stroke-width="1" stroke="black" fill="none"  /> 
    </marker> 
  </defs> 
     
       <rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#pattern1);" />    	 
		 
   <g style="stroke-width:1px; stroke:black; marker-end: url(#MarkerArrow);">     
    <!--  axis X  --> 
 <line x1="20" y1="200" x2="400" y2="200"  />  
     
 <!-- axis Y  --> 
 <line x1="210" y1="400" x2="210" y2="20"  />	   
  </g>  
   
  <text x="222" y="195"  style=" font-size: 14px; text-anchor: middle">0,0</text> 		  
</svg> 
</body> 
</html>