讀兩個單獨的標頭從同一csv文件（D3）

下面是代碼的重要組成部分：讀兩個單獨的標頭從同一csv文件（D3）

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link rel="stylesheet" href="firstdoc.css"> 
     <meta charset="utf-8"> 
     <title>Multi-Class Test Error Visualization</title> 
     <script src="http://d3js.org/d3.v3.js"></script> 
     <style> 
      text.title { 
      font: 20px sans-serif; 
      font-family: Calibri; 
      shape-rendering: crispEdges; 
      } 
     </style> 
    </head> 
    <body> 
     <script type="text/javascript">    
      w = 400; 
      h = 400; 
      barPadding = 1; 
      top_gap = 100; 
      left_gap = 50; 
      var output_format = d3.format("d"); 

      // create svg given the height/width above 
      var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w + left_gap) 
      .attr("height", h + top_gap); 

      var labels = []; 
      var labels2 = []; 


      d3.text("d3_output.csv", function(error, fulldata) { 
       labels = d3.csv.parseRows(fulldata); 
       fulldata = d3.merge(labels); 
       labels = labels[0]; 
       console.log(labels); 


      n = labels.length; 
      fulldata = fulldata.slice(n,fulldata.length); 
      console.log(fulldata); 
      svg.selectAll("top.headers") 
       .data(labels) 
       .enter() 
       .append("text") 
       .text(function(d) { 
        return d; 
       }) 
       .attr("x", function(val, elem_num) { 
        return ((elem_num%n) * (w/n)) + (w/n)/2 - 2 + left_gap; 
       }) 
       .attr("y", 90) 
       .attr("font-family", "sans-serif") 
       .attr("text-anchor", "middle") 
       .attr("font-size", "11px") 
       .attr("fill", "black"); 

      svg.selectAll("left.headers") 
       .data(labels) 
       .enter() 
       .append("text") 
       .text(function(d) { 
        return d; 
       }) 
       .attr("x", 23) 
       .attr("y", function(val, elem_num) { 
        return elem_num*(h/n) + (w/n)/2 + 2 + top_gap;}) 
       .attr("font-family", "sans-serif") 
       .attr("text-anchor", "left") 
       .attr("font-size", "11px") 
       .attr("fill", "black");

此代碼正確地創建從CSV文件，它是11×10的熱圖，與第一行由標題組成。

但現在我有一個需要兩個獨立的頭，我打算到右粘成CSV以下格式的問題：

頂部集（10元）
左頭（10元）
數據（10×10矩陣）

我創建VAR標籤2 = [];存儲左側標題，但我無法弄清楚代碼中還有哪些要改變的地方。

來源

2013-04-26 Jon

您將分配數組的第二個元素到您的新標籤變量並相應地切割fulldata。

temp = d3.csv.parseRows(fulldata); 
fulldata = d3.merge(temp); 
labels = temp[0]; 
labels2 = temp[1]; 
fulldata = fulldata.slice(labels.length + labels2.length, fulldata.length);

來源

2013-04-26 18:09:48

我想我跟着，但它不工作。標籤[1]爲我提供了頂部標題的第二個元素，而不是第二行標題。 – Jon 2013-04-26 18:12:27

好吧，在這種情況下，你需要另一個變量 - 我會解決答案。 – 2013-04-26 18:14:44

哦，你太棒了。非常感謝！ – Jon 2013-04-26 18:22:47

讀兩個單獨的標頭從同一csv文件（D3）

回答

相關問題