Question

在以下示例中，外部刻度尺寸（以及路径高度）在底部轴和顶部轴之间不同。有人可以解释原因吗？我找不到相关的答案。

＆＃13;

var width = 100,
    height = 100,
    margin = 30;
    
var svg = d3.select('body').append('svg')
			  .attr('width', width)
			  .attr('height', height);

var x = d3.scaleLinear()
		  .domain([0, 10])
		  .range([margin, width - margin]);

// Add the Axis
svg.append("g")
   .attr("transform", "translate(0, " + (height - margin) + ")")
   .attr("class", "xAxis")
 .call(d3.axisBottom(x)
   .tickValues([0, 10])
   );
   
svg.append("g")
   .attr("transform", "translate(0, " + ( margin) + ")")
   .attr("class", "xAxis")
 .call(d3.axisTop(x)
   .tickValues([0, 10])
   );

＆＃13;

.xAxis path{
  stroke: black;
  stroke-width: 4px;
}

.xAxis text{
  fill: black;
  font-size: 14px;
}

＆＃13;

<!doctype html>
<meta charset="utf-8">

<script src="https://d3js.org/d3.v4.min.js"></script>

<body></body>

＆＃13;

顶部和底部x轴之间的不同外部刻度尺寸

0 个答案: