D3 drawing step-before paths between other elements

Question

I have data in a multidimensional array in the form of:

data = [
  [
    {
     "x": 329, "y": 484.8333333333333
    },
    {
     "x": 439, "y": 484.8333333333333
    },
    {
      "x": 439, "y": 484.8333333333333
    },
    {
      "x": 549, "y": 484.8333333333333
    }
  ], [
    {
      "x": 559, "y": 484.8333333333333
    },
    {
      "x": 669, "y": 484.8333333333333
    },
    {
      "x": 669, "y": 484.8333333333333
    },
    {
      "x": 779, "y": 484.8333333333333
    }
  ], [
    {
      "x": 329, "y": 313.8333333333333
    },
    {
      "x": 439, "y": 313.8333333333333
    },
    {
      "x": 439, "y": 253.83333333333331
    },
    {
      "x": 549, "y": 253.83333333333331
    }
  ], [
    {
      "x": 559, "y": 313.8333333333333
    },
    {
      "x": 669, "y": 313.8333333333333
    },
    {
      "x": 669, "y": 253.83333333333331
    },
    {
      "x": 779, "y": 253.83333333333331
    }
  ], etc.
]

Each array is the coordinates for one step-before path connecting two svg elements. I've defined a function for generating a path:

stepFuction = d3.svg.line()
     .x(function(d) { return d.x; })
     .y(function(d) { return d.y; })
     .interpolate("step-before");

I am attempting to instantiate the paths like so:

step = svg.selectAll("path")
      .data(_.each(stepData, (d) => { return d; }))
      .enter()
      .append("path")
      .attr("class", "line")
      .attr("d", stepFuction);

Rather than a step-before path, I'm getting a bowtie looking shape (see attachment). Obviously, I am doing something wrong, I'm assuming it has something to do with using _.each inside the data method.

1) What is the correct approach to creating one path per array in my data array?

I would like to be able to drag the elements around and have these paths update. I am using d3.on("tick") for nodes, labels and groups with something like:

node.attr("x", function (d) { return d.x - d.width / 2 + pad; }) .attr("y", function (d) { return d.y - d.height / 2 + pad; });

and it is working correctly but I'm not sure how to update paths as there are multiple values that need to be recalculated on every tick.

2) What is the correct approach to updating these step-before paths on each tick?

I created a fiddle if anything wasn't clear in my description:

d3 step-before fiddle

Answer 1

I think this is actually to do with stylings.

Fiddle

Added this css code:

path {
  stroke-width: 1px;
  fill: none;
  stroke: black;
}