D3 V4勾选第x1行的值

Question

所以这是场景：

我设置xAxis：axisLeft().tickSize(-width)，yAxis也是如此，这会使网格偏离轴：

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

（在本例中，我将manualy x1值设置为刻度线）。

Answer 1

您不能使用tickSize同时进行内部和外部的勾选。正值将使得蜱在外面增长，而负值将使得蜱在绘图区域内增长。

但是有不同的方法可以同时使用内部和外部的滴答声。我最喜欢的是在不使用轴生成器的情况下创建一组单独的线（网格线）（请参阅我的答案：https://stackoverflow.com/a/38329969/5768908）。这更复杂，但有一个优点，可以让你设置不同的颜色，笔画宽度，不透明度等。

一种不允许此类自定义的简单方法是将标记转换为左侧。在此演示中，我设置了tickSize：

.tickSize(width + someValue)

然后将它们移到左边：

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

查看演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;