Graph Node and edge are overlapping for edge curve style d3.curveStep

For edge curvature of type d3.curveStep , there is a overlap of edge arrow and node. Please refer the below screenshot. Code snippet (Used the demo code)

<!doctype html>

<meta charset="utf-8">
<title>Dagre D3 Demo: Style Attributes</title>

<link rel="stylesheet" href="demo.css">
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="../dagre-d3.js"></script>

<h1>Dagre D3 Demo: Style Attributes</h1>

<style id="css">
text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

.node rect {
  stroke: #333;
  fill: #fff;
  stroke-width: 1.5px;
}

.edgePath path.path {
  stroke: #333;
  fill: none;
  stroke-width: 1.5px;
}

.arrowhead {
 stroke: blue;
 fill: blue;
 stroke-width: 1.5px;
}

</style>

<svg id="svg" width=960 height=600></svg>

<section>
<p>An example showing how styles that are set in the input graph can be applied
to nodes, node labels, edges, and edge labels in the rendered graph.
</section>

<script id="js">
// Create the input graph
var g = new dagreD3.graphlib.Graph().setGraph({});

// Fill node "A" with the color green
g.setNode("A", { style: "fill: #afa" });

// Make the label for node "B" bold
g.setNode("B", { labelStyle: "font-weight: bold" });

// Double the size of the font for node "C"
g.setNode("C", { labelStyle: "font-size: 2em" });

g.setNode("D", {});

g.setNode("E", {});

// Make the edge from "A" to "B" red, thick, and dashed
g.setEdge("A", "B", {
  style: "stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;",
  curve: d3.curveStepAfter
});

// Make the label for the edge from "C" to "B" italic and underlined
g.setEdge("C", "B", {
  label: "A to C",
  labelStyle: "font-style: italic; text-decoration: underline;",
  curve: d3.curveStepAfter
});

// Make the edge between A and D smoother. 
// see available options for lineInterpolate here: https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate
g.setEdge("A", "D", {
  label: "line interpolation different",
  curve: d3.curveStepAfter
});

g.setEdge("E", "D", {curve: d3.curveStepAfter});

// Make the arrowhead blue
g.setEdge("A", "E", {
  label: "Arrowhead class",
  curve: d3.curveStepAfter
});

// Create the renderer
var render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
    inner = svg.append("g");

// Run the renderer. This is what draws the final graph.
render(inner, g);

// Center the graph
var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
inner.attr("transform", "translate(" + xCenterOffset + ", 20)");
svg.attr("height", g.graph().height + 40);
</script>

<script src="demo.js"></script>

Kindly let me know, if I am missing any configuration.

dagrejs / dagre-d3

Graph Node and edge are overlapping for edge curve style d3.curveStep #367