CODEWITHSUNDEEP
d3.js
Mahesh_K
Mahesh_K

Reputation: 13

Unable to see the line chart in D3.js

I am a newbie to D3.js and i am facing issue with basic line chart. I am following through a tutorial to create a line chart, but I'm having issue in creating the chart.

Attached is my code and I'm unable to see the chart.

I can see that "path" tag is added to SVG, but "d" attribute is not added to the "path" tag due to which I'm unable to see the graph.

I don't see any errors in console. Do I have to rotate/ transform the graph to see the line chart? Could someone help on this please?

const margin = { top: 20, right: 20, bottom: 20, left: 35 };
const width = 800;
const height = 500;

const data = [
  { date: 1484145000, value: 100 },
  { date: 1484231400, value: 150 },
  { date: 1484317800, value: 200 },
  { date: 1484663400, value: 250 },
  { date: 1484749800, value: 300 }
];

const xMax = d3.max(data, d => {
  return new Date(d.date * 1000);
});

const xMin = d3.min(data, d => {
  return new Date(d.date * 1000);
});

const yMax = d3.max(data, d => {
  return d.value;
});

const yMin = d3.min(data, d => {
  return d.value;
});

const xScale = d3
  .scaleTime()
  .domain([xMin, xMax])
  .range([margin.left, width - margin.right])
  .nice();

const yScale = d3
  .scaleLinear()
  .domain([yMin, yMax])
  .range([height - margin.bottom, margin.top])
  .nice();


const svg = d3.select("svg");

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

const line = d3
  .line()
  .x(d => xScale(new Date(d.date * 1000)))
  .y(d => yScale(d.value));

svg
  .selectAll("path")
  .data(data)
  .join("path")
  .attr("class", "big-mac-line")
  .attr("d", line)
  .style("stroke", "black")
  .style("stroke-width", 2)
  .style("fill", "transparent");

svg
  .append("g")
  .attr("class", "xAxis")
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(xAxis);

svg
  .append("g")
  .attr("class", "yAxis")
  .attr("transform", `translate(${margin.left},0)`)
  .call(yAxis);
.chart-svg {
  width: 800px;
  height: 500px;
}
<!DOCTYPE html>

<head>
    
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link rel="stylesheet" href="pre-test.css">
</head>

<body>
    <div class="chart-container">
        <svg class="chart-svg"></svg>
    </div>
    <script src="pre-test.js"></script>
</body>

Upvotes: 1

Views: 65

Answers (2)

ROOT
ROOT

Reputation: 11622

Just change your SVG path to append and use .datum() function instead of .data() check this bl.ocks.org to know the differenece.

svg
  .append("path")
  .datum(data)
  .join("path")
  .attr("class", "big-mac-line")
  .attr("d", line)
  .style("stroke", "black")
  .style("stroke-width", 2)
  .style("fill", "transparent");

here is a working snippet:

const margin = { top: 20, right: 20, bottom: 20, left: 35 };
const width = 800;
const height = 500;

const data = [
  { date: 1484145000, value: 100 },
  { date: 1484231400, value: 150 },
  { date: 1484317800, value: 200 },
  { date: 1484663400, value: 250 },
  { date: 1484749800, value: 300 }
];

const xMax = d3.max(data, d => {
  return new Date(d.date * 1000);
});

const xMin = d3.min(data, d => {
  return new Date(d.date * 1000);
});

const yMax = d3.max(data, d => {
  return d.value;
});

const yMin = d3.min(data, d => {
  return d.value;
});

const xScale = d3
  .scaleTime()
  .domain([xMin, xMax])
  .range([margin.left, width - margin.right])
  .nice();

const yScale = d3
  .scaleLinear()
  .domain([yMin, yMax])
  .range([height - margin.bottom, margin.top])
  .nice();


const svg = d3.select("svg");

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

const line = d3
  .line()
  .x(d => xScale(new Date(d.date * 1000)))
  .y(d => yScale(d.value));

svg
  .append("path")
  .datum(data)
  .join("path")
  .attr("class", "big-mac-line")
  .attr("d", line)
  .style("stroke", "black")
  .style("stroke-width", 2)
  .style("fill", "transparent");

svg
  .append("g")
  .attr("class", "xAxis")
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(xAxis);

svg
  .append("g")
  .attr("class", "yAxis")
  .attr("transform", `translate(${margin.left},0)`)
  .call(yAxis);
.chart-svg {
  width: 800px;
  height: 500px;
}
<!DOCTYPE html>

<head>
    
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link rel="stylesheet" href="pre-test.css">
</head>

<body>
    <div class="chart-container">
        <svg class="chart-svg"></svg>
    </div>
    <script src="pre-test.js"></script>
</body>

Upvotes: 0

Jasdeep Singh
Jasdeep Singh

Reputation: 8321

I am not able to find any issue with the code. As line generator expects an array, Can you please try to pass array to data function like .data([data])

const margin = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 35
};
const width = 800;
const height = 500;

const data = [{
    date: 1484145000,
    value: 100
  },
  {
    date: 1484231400,
    value: 150
  },
  {
    date: 1484317800,
    value: 200
  },
  {
    date: 1484663400,
    value: 250
  },
  {
    date: 1484749800,
    value: 300
  }
];

const xMax = d3.max(data, d => {
  return new Date(d.date * 1000);
});

const xMin = d3.min(data, d => {
  return new Date(d.date * 1000);
});

const yMax = d3.max(data, d => {
  return d.value;
});

const yMin = d3.min(data, d => {
  return d.value;
});

const xScale = d3
  .scaleTime()
  .domain([xMin, xMax])
  .range([margin.left, width - margin.right])
  .nice();

const yScale = d3
  .scaleLinear()
  .domain([yMin, yMax])
  .range([height - margin.bottom, margin.top])
  .nice();

const svg = d3.select("svg");

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

const line = d3
  .line()
  .x(function(d) { 
    return xScale(new Date(d.date * 1000));
    })
  .y(function(d) {
    return yScale(d.value);
  });

svg
  .append("path")
  .data([data])
  .attr("class", "big-mac-line")
  .attr("d", line)
  .style("stroke", "black")
  .style("stroke-width", 2)
  .style("fill", "transparent");

svg
  .append("g")
  .attr("class", "xAxis")
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(xAxis);

svg
  .append("g")
  .attr("class", "yAxis")
  .attr("transform", `translate(${margin.left},0)`)
  .call(yAxis);
.chart-svg {
  width: 800px;
  height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="chart-container">
  <svg class="chart-svg"></svg>
</div>

Upvotes: 1

Related Questions