Javascript 使用d3.js在x轴上创建包含文本数据的多折线图_Javascript_D3.js_Powerbi

Javascript 使用d3.js在x轴上创建包含文本数据的多折线图

javascript d3.js powerbi

Javascript 使用d3.js在x轴上创建包含文本数据的多折线图,javascript,d3.js,powerbi,Javascript,D3.js,Powerbi,我想画一个折线图来显示3个不同部门每个教育水平UG、PG等的平均出勤率。我在互联网上找到的几乎所有例子在轴和轴上都有线性刻度。我试图修改这些例子，但发现很难让它们工作，因为我的数据。我得到了一个160000行的数据集，我计算了每个部门每个级别的平均出勤率，并设法将数据减少到9行。现在我想画出如下所示的图。有人能帮我吗？这是我输入PowerBI的数据此代码应该可以工作。您必须将Book1.csv替换为csv文件的路径：参考资料：你好谢谢你的密码。它工作起来很有魅力。您知道如何在值处

我想画一个折线图来显示3个不同部门每个教育水平UG、PG等的平均出勤率。我在互联网上找到的几乎所有例子在轴和轴上都有线性刻度。我试图修改这些例子，但发现很难让它们工作，因为我的数据。我得到了一个160000行的数据集，我计算了每个部门每个级别的平均出勤率，并设法将数据减少到9行。现在我想画出如下所示的图。有人能帮我吗？这是我输入PowerBI的数据

此代码应该可以工作。您必须将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>