使用 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() 绑定没有正常工作。

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

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

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

有什么问题吗？

Answer 1

而不是

var horizontalGrids = innerCanvas
      .data(yAxisData)
    .append("path")
    ...

你需要

var horizontalGrids = innerCanvas
      .data(yAxisData);

horizontalGrids.enter()
    .append("path")
    ...

Answer 2

你不是 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.

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

Using D3 to draw background gridline paths in a matrix for scatterplots?

javascript

path

line

scatter-plot

d3.js