javascript - 在 d3.js 中的特定刻度处绘制网格线/刻度线

Question

我正在尝试创建一个散点图，我已经做得很好了。我想通过在 x 轴上的特定点和 y 轴上的特定点绘制刻度线来将该图分成四个象限。就我而言，两个轴都显示百分比，因此我想在两个轴上的 0.50 刻度处画一条线，但我不知道如何执行此操作，也找不到任何适用的文档我。

这是我必须定义的轴:

var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(20)
    .tickSubdivide(true)
    .tickSize(6, 3, 0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(20)
    .tickSubdivide(true)
    .tickSize(6, 3, 0)
    .orient("left");

如有任何见解，我们将不胜感激。

Answer 1

这里的关键点是您尝试附加两条线，将散点图均匀划分为四个象限。为此，您可以找到 x 轴和 y 轴的最小值/最大值(使用它们相应的比例)，然后在中点附加线条:

var startX = d3.min(x.domain()),
    endX = d3.max(x.domain()),
    startY = d3.min(y.domain()),
    endY = d3.max(y.domain());
var lines = [{x1: startX, x2: endX, y1: (startY + endY)/2, y2: (startY + endY)/2},
             {x1: (startX + endX)/2, x2: (startX + endX)/2, y1: startY, y2: endY}]

然后您只需将这些行附加到您的图形中:

fig.selectAll(".grid-line")
    .data(lines).enter()
    .append("line")
    .attr("x1", function(d){ return x(d.x1); })
    .attr("x2", function(d){ return x(d.x2); })
    .attr("y1", function(d){ return y(d.y1); })
    .attr("y2", function(d){ return y(d.y2); })
    .style("stroke", "#000")
    .style("stroke-dasharray", (10, 10));

这样做会给你这样的结果( see corresponding complete JSFiddle ):