D3轴刻度线和网格线不对齐

我想绘制只有一条垂直网格线和一条横跨（0,0）点的水平网格线的绘图。我有以下的脚本，但不幸的是轴的滴答声和网格线的起源没有正确对齐。这种差异的根源是什么？我该如何解决这个问题？D3轴刻度线和网格线不对齐

<!doctype html> 
<meta charset="utf-8"> 

<script src="d3.min.js"></script> 

<body> 

</body> 

<script> 

var margin = {top: 60, right: 60, bottom: 60, left: 70}, 
    width = 550, 
    height = 550; 

var svg = d3.select('body').append('svg') 
         .attr('width', width) 
         .attr('height', height); 


var xScale = d3.scaleLinear().domain([-1,1]).range([0+margin.left, width-margin.right]); 

var yScale = d3.scaleLinear().domain([-1,1]).range([height - margin.bottom, 0 + margin.top]); 


// Add the x Axis 
svg.append("g") 
    .attr("transform", "translate(0," + (height - margin.top) + ")") 
    .attr("class", "axis") 
    .call(d3.axisBottom(xScale) 
    .ticks(4) 
    .tickSizeOuter(0) 
    ); 

svg.append("g") 
    .attr("transform", "translate(0," + (margin.top) + ")") 
    .attr("class", "axis") 
    .call(d3.axisTop(xScale) 
    .ticks(0) 
    .tickSizeOuter(0) 
    ); 

// Add the y Axis 
svg.append("g") 
    .attr("transform", "translate(" + (margin.left) + ", 0)") 
    .attr("class", "axis") 
    .call(d3.axisLeft(yScale) 
    .ticks(4) 
    .tickSizeOuter(0) 
    ); 

svg.append("g") 
    .attr("transform", "translate(" + (width - margin.right) + ", 0)") 
    .attr("class", "axis") 
    .call(d3.axisRight(yScale) 
    .ticks(0) 
    .tickSizeOuter(0) 
    ); 

//grid lines 
svg.append('line') 
    .attr('x1', xScale(0)) 
    .attr('y1', height - margin.bottom) 
    .attr('x2', xScale(0)) 
    .attr('y2', margin.top) 
    .style('stroke', 'grey') 
    .style('stroke-width', 1); 

//grid lines 
svg.append('line') 
    .attr('x1', margin.left) 
    .attr('y1', yScale(0)) 
    .attr('x2', width - margin.right) 
    .attr('y2', yScale(0)) 
    .style('stroke', 'grey') 
    .style('stroke-width', 1); 


</script>

和这里的结果

来源

2016-11-10 spyrostheodoridis

我最近遇到了同样的问题。下面是一个解决方案，但我有一种感觉可能有一个更优雅的方式来做到这一点。如果你看一看轴标记的x1和x2分量，你会看到它们的值都是0.5。 web inspector output

如果0.5抵消你的线X1和X2的值，它会正确地排队：

//grid lines 
svg.append('line') 
.attr('x1', xScale(0) + 0.5) 
.attr('y1', height - margin.bottom) 
.attr('x2', xScale(0) + 0.5) 
.attr('y2', margin.top) 
.style('stroke', 'grey') 
.style('stroke-width', 1);

下面是完整的代码：js fiddle with gridlines

来源

2017-03-17 13:43:08 Chris

我觉得0.5转变为以抵消宽度的线。 –

D3轴刻度线和网格线不对齐

回答

相关问题