D3無法呈現一條簡單的線

我正嘗試使用下面的代碼創建一條簡單的線。數據以json的形式出現。瀏覽器控制檯沒有錯誤。另外，如果我在JavaScript中設置了一個突破點，我可以看到數據正在加載到變量ds中。我可以猜想它與json（具有多個值的鍵）的格式以及我將它傳遞給函數linefun的方式有關。D3無法呈現一條簡單的線

這是一切完成後（檢查元素）在瀏覽器中的輸出。所以SVG和路徑是在沒有數據的情況下創建的。

<svg width="400" height="100"> 
    <path stroke="blue" stroke-width="2" fill="none"> 
    </path> 
    </svg>

數據

{ 
    "-K_4W89HOwyew6pU78Rq" : 
     { 
     "price" : 879.0, 
     "screen" : 15.6 
     }, 
    "-K_4YZzsghq-segc47X0" : 
     { 
     "price" : 799.99, 
     "screen" : 15.6 
     } 
    }

這是我的Javascript代碼。

<script> 
    var h = 100; 
    var w = 400; 
    var ds; 

    var url = "/Home/getdata/"; 
    d3.json(url, function (error,data) { 
     if(error) 
     { 
      console.log(error); 
     } 
     else { 
      ds = data; 
      console.log("Success!"); 

      var lineFun = d3.svg.line() 
         .x(function (d) { 
         return d.price/100 
         }) 
         .y(function (d) { 
         return h - d.screen; 
         }) 
         .interpolate("linear"); 

      var svg = d3.select("body").append("svg") 
      .attr({ 
       width: w, 
       height: h 
      }); 
      var viz = svg.append("path") 
      .attr({ 
       d: lineFun(ds), 
       "stroke": "blue", 
       "stroke-width": 2, 
       "fill": "none" 
      }); 

     } 
    }); 




    </script>

來源

2016-12-29 user1609429

什麼是lineFun？ –

lineFun（Line function）是一個接受數據作爲輸入的函數，輸出將是svg.append（「path」）的x和y座標，這個座標是基於我們傳遞給它的數據。因此，對於每個數據對象，它應該返回特定的x和y以在路徑中繪圖。 – user1609429

D3 line functions通常需要數據元素的陣列，而不是一個對象像你有。你可以先把你的數據對象轉換爲一個數組，它應該工作：

(...) 
d3.json(url, function (error,data) { 
    if(error) 
    { 
     console.log(error); 
     return 
    } 

    ds = Object.keys(data).map(function(k) { return data[k] }); 
    console.log("Success! Data parsed:", ds); 

    var lineFun = d3.svg.line() 
    (...) 
});

Object.keys你的對象將返回所有鍵的數組（如「-K_4W89HOwyew6pU78Rq」）和Array.map用於返回包含在該值鍵作爲數組項。

來源

2016-12-29 14:23:40 user3432422

我不同意這種編輯方式，將對象轉換爲數組客戶端可能是合理的，如果他無法控制數據，但我認爲我們不能這樣做。與首先將數據作爲數組提供相比，該解決方案增加了複雜性。 – user3432422

D3無法呈現一條簡單的線

回答

相關問題