在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）：