使用 d3.js 使用 x 轴中的文本数据创建多折线图

Question

I am looking to plot a line chart to display average attendance of each education level(UG,PG etc.,) in 3 different departments.我希望绘制一个折线图来显示 3 个不同部门中每个教育级别（UG、PG 等）的平均出勤率。 Almost all the examples I have found in the internet have linear scales in both the axis.我在互联网上找到的几乎所有示例都在两个轴上都有线性刻度。 I am trying to modify these examples but finding it difficult to make them work, for my data.我正在尝试修改这些示例，但发现很难使它们对我的数据起作用。 I was given a dataset with 160,000 rows and I have calculated the avg attendance of each level in each department and managed to cut down the data to 9 rows.我得到了一个包含 160,000 行的数据集，我计算了每个部门每个级别的平均出勤率，并设法将数据减少到 9 行。 Now I want to plot it as given below.现在我想按照下面给出的方式绘制它。 can anyone help me out?谁能帮我吗？ here is the data I fed into the PowerBI这是我输入 PowerBI 的数据

Answer 1

This code should work.这段代码应该可以工作。 You would have to replace the "Book1.csv" with the path to your csv file:您必须将“Book1.csv”替换为 csv 文件的路径：

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
  .line {
    fill: none;
    stroke-width: 2px;
  }
</style>
<body>
  <!-- load the d3.js library -->     
  <script src="https://d3js.org/d3.v5.min.js"></script>

  <!-- D3 script -->
  <script>

  // Width, Height, and Margins of the Graph
  var margin = {top: 50, right: 50, bottom: 50, left: 50},
  width = 800 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

  var valueline = d3.line()
    .x(function(d) { return x(d.Level); })
    .y(function(d) { return y(d.Attendance); });

  var x = d3.scaleBand()
    .range([0, width])
    .padding(1);

  var y = d3.scaleLinear().range([height, 0]);

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

  // Load data from csv
  d3.csv("Book1.csv").then(function(data) {

    data.forEach(function(d) {
      //Since according to d3 documentation, all data parse from CSV will be strings, need to convert to number
      d.Attendance = +d.Attendance;
    });

   // Domain of x and y
   x.domain(['PG','UG','Foundation']);
   y.domain(d3.extent(data, function(d) { return d.Attendance; }));

  // Nest the entries by symbol
  var dataNested = d3.nest()
    .key(function(d) {return d.Department;}).sortKeys(d3.ascending)
    .sortValues(function(a,b) { return parseFloat(b.Attendance) - parseFloat(a.Attendance); } )
    .entries(data);

  // Setting color scale e.g. schemeAccent, schemeDark2, schemeCategory20, schemeSet1 etc.
  var color = d3.scaleOrdinal(d3.schemeAccent);

  // Loop through the keys (Department) to add colors to the lines according to the keys
  dataNested.forEach(function(d) { 
    svg.append("path")
    .attr("class", "line")
    .style("stroke", function() { 
      return d.color = color(d.key); })
    .attr("d", valueline(d.values));
  });

  console.log(dataNested);

  // Append x axis to svg
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Append y axis to svg
  svg.append("g")
    .attr("class", "axis")
    .call(d3.axisLeft(y));
  });

</script>
</body>

References:参考：

https://bl.ocks.org/d3noob/ddd7129c4486085937eb28da0d22a240 https://bl.ocks.org/d3noob/b51d808d269533a9ae0213704f515a3a https://bl.ocks.org/d3noob/ddd7129c4486085937eb28da0d22a240 https://bl.ocks.org/d3noob/b51d808d269533a9ae0213704f515a3a

https://devdocs.io/d3/d3-collection#nest_sortKeys https://devdocs.io/d3/d3-collection#nest_sortKeys

使用 d3.js 使用 x 轴中的文本数据创建多折线图

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-04-01 11:10:14

使用 d3.js 使用 x 轴中的文本数据创建多折线图

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-04-01 11:10:14

解决方案1
1 已采纳 2020-04-01 11:10:14