Javascript 在d3.js中的特定记号处绘制网格线/记号线

我正在尝试创建一个散点图，我已经能够做得很好了。我想通过在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");

---

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

这里的关键点是，您试图添加两条线，将散点图平均划分为四个象限。为此，您可以找到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));

这样做会产生如下结果（）：

---

谢谢。这基本上起到了作用，但我的水平线不在正确的位置，因为我的数据不是完全在0-100之间。线始终需要放置在x上50，y上50。这对应于百分比，所以我希望一行始终为50和50。我试过了，但没有成功：

var-lines=[{x1:50，x2:50，y1:0，y2:100}，{x1:0，x2:100，y1:50，y2:50}]

最后没有行。@jonmrich:我不确定我是否理解。你能把你的密码寄出去吗？更容易理解发生了什么。事实上，我发现你的方法正是我所需要的。我想把图表分成4个相等的象限，这应该由数据中的范围来定义。我现在的问题是，我的所有点都落在左下象限，因为我的轴范围错误。你如何根据数据最大值和最小值设置访问范围？@jonmrich：我认为你应该把它作为一个单独的问题与你的代码一起发布。我很乐意看一看。不幸的是，我每90分钟只能发布一次问题，希望在那之前能找到答案。我会在可能的时候发布新问题，但与此同时，我只是想弄清楚如何动态设置这些值：

x.domain（[0100]）；y.domain（[0100]）