CODEWITHSUNDEEP
javascriptd3.jssvg
Rafa
Rafa

Reputation: 3349

d3 js .append("line") doesn't show up

I'm trying to put a place holder for my x and y axes for a graph I'm going to make, but the lines aren't showing up. I was able to draw an eclipse on the same svg I'm using here, but for whatever reason the lines just don't show.

svg = d3.select("body").append("svg")
  .attr("width", 300)
  .attr("height", 300);

console.log("window width" + window.innerWidth/2);

line = svg.append("line")
  .attr("x1",300)
  .attr("y1", 0)
  .attr('x2', 0)
  .attr("y2", 300)
  .attr("stroke-width", 5)
  .attr("fill", "black");

Upvotes: 0

Views: 1353

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

lines have no width and cannot be filled. You want stroke rather than fill.

svg = d3.select("body").append("svg")
  .attr("width", 300)
  .attr("height", 300);

console.log("window width" + window.innerWidth/2);

line = svg.append("line")
  .attr("x1",300)
  .attr("y1", 0)
  .attr('x2', 0)
  .attr("y2", 300)
  .attr("stroke-width", 5)
  .attr("stroke", "black");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Upvotes: 1

Related Questions