There is no line generated and no ticks and labels on x axis appeared as well

Community Help
1

Hello there,

What went wrong in my code that there is no line generated and no ticks and labels on x axis appeared as well?

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatable" content="ie=edge">
    <title>Document</title>
  </head>
  <div id="container"></div>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script type='module'>
    
 const aapl = [{date: "2007-04-24", close: 95.35},
  {date: "2007-04-25", close: 98.84},
  {date: "2007-04-26", close: 99.92},
  {date: "2007-04-29", close: 99.8},
  {date: "2007-05-01", close: 99.47},
  {date: "2007-05-02", close: 100.39},
  {date: "2007-05-03", close: 100.4},
  {date: "2007-05-04", close: 100.81},
  {date: "2007-05-07", close: 103.92},
  {date: "2007-05-08", close: 105.06},
  {date: "2007-05-09", close: 106.88},
  {date: "2007-05-09", close: 107.34},
  {date: "2007-05-10", close: 108.74},
  {date: "2007-05-13", close: 109.36},
  {date: "2007-05-14", close: 107.52},
	 {date: "2007-05-15", close: 107.34}];
// chart = {
  // Declare the chart dimensions and margins.
  const width = 928;
  const height = 500;
  const marginTop = 20;
  const marginRight = 30;
  const marginBottom = 30;
  const marginLeft = 40;

  // Declare the x (horizontal position) scale.
    const x = d3.scaleUtc(d3.extent(aapl, d => d.date), [marginLeft, width - marginRight]);

  // Declare the y (vertical position) scale.
    const y = d3.scaleLinear([0, d3.max(aapl, d => d.close)], [height - marginBottom, marginTop]);

  // Declare the line generator.
  const line = d3.line()
      .x(d => x(d.date))
      .y(d => y(d.close));

  // Create the SVG container.
  const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", [0, 0, width, height])
      .attr("style", "max-width: 100%; height: auto; height: intrinsic;");

  // Add the x-axis.
  svg.append("g")
      .attr("transform", `translate(0,${height - marginBottom})`)
      .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));

  // Add the y-axis, remove the domain line, add grid lines and a label.
  svg.append("g")
      .attr("transform", `translate(${marginLeft},0)`)
      .call(d3.axisLeft(y).ticks(height / 40))
      .call(g => g.select(".domain").remove())
      .call(g => g.selectAll(".tick line").clone()
          .attr("x2", width - marginLeft - marginRight)
          .attr("stroke-opacity", 0.1))
      .call(g => g.append("text")
          .attr("x", -marginLeft)
          .attr("y", 10)
          .attr("fill", "currentColor")
          .attr("text-anchor", "start")
          .text("↑ Daily close ($)"));

  // Append a path for the line.
  svg.append("path")
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", line(aapl));

    container.append(svg.node());
// };
</script>
</body>
</html>
2

The x scale is expecting dates (or numbers), not strings:

You can convert these strings to dates by using

d.date = d3.isoParse(d.date))

or

d.date = new Date(d.date)

3

Thank you for your prompt reply. I followed your advise

// Declare the x (horizontal position) scale.
    const x = d3.scaleUtc(d3.extent(aapl, d => d3.isoParse(d.date)), [marginLeft, width - marginRight]);
// Declare the line generator.
  const line = d3.line()
	.x((d) => d3.isoParse(d.date))
	.y((d) => d.close);

As for ticks and labels it worked!

May you tell me why chart lines are not generated?

// Declare the line generator.
  const line = d3.line()
	.x((d) => x(d3.isoParse(d.date)))
	.y((d) => y(d.close));

and this code solved my problem of drawing line chart!
Thanks a lot!