javascript - 使用D3在散点图矩阵中绘制背景网格线路径？

Question

我已经能够绘制散点图的大部分视觉组件。

我现在想使用较浅的颜色绘制一些背景网格线。换句话说，每个 X 坐标都会有一个对应的垂直背景网格线，该网格线会覆盖 Y 轴的整个高度，每个 Y 坐标都会有一个对应的水平背景网格线，该网格线会覆盖 X 轴的整个宽度。

我尝试使用以下代码绘制水平路径:

    // Create horizontal paths...
    var horizontalGrids = innerCanvas
        .data(yAxisData)
      .append("path")
        //.attr("d", lineFunction(dataSet))
        .attr("d", function(d, i){
          var p1 = {x: 0, y: yAxisScale(d)};
          var p2 = {x: marginRight-100, y: yAxisScale(d)};
          var pts = [];
          pts.push(p1);
          pts.push(p2);
          return lineFunction(pts);
        })
        .attr("stroke", "gray")
        .attr("stroke-width", 2)
        .attr("fill", "gray");

lineFunction 的代码是:

    var lineFunction = d3.svg.line()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; })
      .interpolate("linear");

传入并用于 yAxisData 的数据数组是:

var seasonsArray = ["Winter", "Spring", "Summer", "Autumn"];

目的是绘制四 (4) 条独立的水平路径线，一条对应数组“seasonsArray”的每个元素。

但是，这似乎只绘制了一条水平路径(即第一条路径线)，并且似乎忽略了所有其他路径。 data() 绑定(bind)似乎无法正常工作。

您可以在标题为“让我们使用路径引入一些网格线:”的散点图部分中看到问题，如下例所示:http://bl.ocks.org/Guerino1/raw/9ae1b738088761f135e1/

原始代码可以在:https://gist.github.com/Guerino1/9ae1b738088761f135e1找到

包含上述代码片段的原始代码中的完整函数称为“draw6(...)”。

对于问题出在哪里有什么想法吗？

Answer 1

你不是thinking with joins 。模式为 selectAll、enter 和 append:

var horizontalGrids = innerCanvas
    .selectAll(".horzGrid")
    .data(yAxisData)
    .enter()
    .append("path")
    .attr("class", "horzGrid")
    .attr("d", lineFunction(dataSet))
  .attr("d", function(d, i) {
    var p1 = {
      x: 0,
      y: yAxisScale(d)
    };
    var p2 = {
      x: marginRight - 100,
      y: yAxisScale(d)
    };
    var pts = [];
    pts.push(p1);
    pts.push(p2);
    return lineFunction(pts);
  })
    .attr("stroke", "gray")
    .attr("stroke-width", 2)
    .attr("fill", "gray");

示例 here .