Question

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

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

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

 Public Sub dele()

    Try
        Dim con As New SqlConnection("Data Source=192.168.10.3;Initial Catalog=IT_INV;user id=sa;password=1n@r1dev")

        con.Open()

        Dim inventtable As New DataTable("pc")
        Dim rs As New SqlCommand("DELETE * FROM pc WHERE [pcname]= '" & Label5.Text & "' ", con)

        rs.ExecuteNonQuery()
        MessageBox.Show("Data Deleted")

        con.Close()
        Display_Data()
    Catch ex As Exception
        MessageBox.Show(ex.Message)
    End Try
End Sub

lineFunction的代码是：

    // 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");

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

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

目的是绘制四（4）个单独的水平路径线，一个用于数组“seasonsArray”的每个元素。

然而，这似乎只绘制了一条水平路径（即第一条路径线）并且似乎忽略了所有其他路径。似乎data（）绑定无法正常工作。

您可以在Scatterplot部分标题为“让我们使用路径投入一些网格线”中查看问题，在以下可视示例中：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。

Answer 2

而不是

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

你需要

var horizontalGrids = innerCanvas
      .data(yAxisData);

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

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

2 个答案: