javascript - D3 V4 刻度线 x1 值

Question

所以这是场景:

我设置了xAxis:axisLeft().tickSize(-width)，与yAxis相同，这使得网格脱离轴:

是否可以用刻度线制作网格，同时使它们指向像这样的刻度值？

(在此示例中，我将手动 x1 值设置为刻度线)。

Answer 1

使用 tickSize 不能让刻度线同时进入内部和外部。正值将使刻度在绘图区域之外生长，负值将使刻度在绘图区域内生长。

但是有不同的方法可以同时拥有内部和外部蜱虫。我最喜欢的是在不使用轴生成器的情况下创建一组单独的线(网格线)(请参阅我的答案: https://stackoverflow.com/a/38329969/5768908 )。这比较复杂，但优点是允许您将它们设置不同的颜色、描边宽度、不透明度等。

一种更简单的方法(不允许此类自定义)是将刻度线向左平移。在此演示中，我设置 tickSize:

.tickSize(width + someValue)

然后将它们向左移动:

.attr("transform", "translate(-someValue, 0)");

查看演示:

var svg = d3.select("body").append("svg");
var data = d3.range(10);
var yScale = d3.scaleLinear().domain([0,10]).range([140,10]);
var yAxis = d3.axisLeft(yScale).tickSize(-256).tickPadding(10);
var gY = svg.append("g").attr("class", "y axis").attr("transform", "translate(50,0)").call(yAxis);
d3.selectAll(".y.axis .tick line").attr("transform", "translate(-6,0)");

.y.axis .tick line{
	stroke: #999
}

<script src="https://d3js.org/d3.v4.min.js"></script>