javascript - D3 V4在x1值线上滴答

所以这是场景：

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



是否可以使刻度线超出网格，同时使其指向刻度值呢？



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

最佳答案

使用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>

关于javascript - D3 V4在x1值线上滴答，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40470285/