D3.js D3轴记号和网格线不对齐_D3.js_Svg

D3.js D3轴记号和网格线不对齐

d3.js svg

D3.js D3轴记号和网格线不对齐,d3.js,svg,D3.js,Svg,我想画一个只有一条垂直和一条水平网格线穿过（0,0）点的图。我有以下脚本，但不幸的是轴刻度和网格线的原点没有正确对齐。这种差异的根源是什么？我如何解决 <!doctype html> <meta charset="utf-8"> <script src="d3.min.js"></script> <body> </body> <script> var margin = {top: 60, right:

我想画一个只有一条垂直和一条水平网格线穿过（0,0）点的图。我有以下脚本，但不幸的是轴刻度和网格线的原点没有正确对齐。这种差异的根源是什么？我如何解决

<!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>


var margin={顶部：60，右侧：60，底部：60，左侧：70}，
宽度=550，
高度=550；
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width）
.attr（'高度'），高度；
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]）；
//添加x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”+（高度-边距.top）+”）
.attr（“类”、“轴”）
.call（d3.axisBottom（xScale）
.滴答声（4）
.滴答器（0）
);
svg.append（“g”）
.attr（“转换”、“转换（0）”+（margin.top）+>）
.attr（“类”、“轴”）
.call（d3.axisTop（xScale）
.滴答声（0）
.滴答器（0）
);
//添加y轴
svg.append（“g”）
.attr（“转换”、“平移”（+（margin.left）+“，0）”）
.attr（“类”、“轴”）
.call（d3.axisLeft（yScale）
.滴答声（4）
.滴答器（0）
);
svg.append（“g”）
.attr（“transform”、“translate”（+（width-margin.right）+“，0）”）
.attr（“类”、“轴”）
.call（d3.axisRight（yScale）
.滴答声（0）
.滴答器（0）
);
//网格线
append（'行'）
.attr（'x1'，xScale（0））
.attr（'y1'，高度-页边距.底部）
.attr（'x2'，xScale（0））
.attr（'y2'，页边距.top）
.style（'笔划'，'灰色'）
.样式（“笔划宽度”，1）；
//网格线
append（'行'）
.attr（'x1'，左边距）
.attr（'y1'，yScale（0））
.attr（'x2'，宽度-边距。右侧）
.attr（'y2'，yScale（0））
.style（'笔划'，'灰色'）
.样式（“笔划宽度”，1）；

结果如下

我最近遇到了同样的问题。下面是一个解决方案，但我有一种感觉，可能有一种更优雅的方式来做到这一点。如果查看轴记号的x1和x2分量，您将看到它们的值均为0.5

如果将线x1和x2值偏移0.5，它将正确对齐：

//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);

这是完整的代码：

我认为0.5的偏移是为了抵消行的宽度。