D3単純な行をレンダリングできません

Question

以下のコードを使用して単純な行を作成しようとしています。データはjsonの形式です。ブラウザコンソールにエラーはありません。また、私はJavaScriptの中にブレークポイントを設定すると、データが変数dsにロードされていることがわかります。私はそれがjson（複数の値を持つキー）の形式と関係があると思いますし、私はそれを関数linefunに渡しています。

これはすべてが完了した後のブラウザの出力です（要素の検査）。 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> 

Answer 1

D3 line functionsは通常、あなたのようなオブジェクトではなく、データ要素の配列を取ります。あなたは、データオブジェクトは、最初の配列に変換することができ、それが動作するはずです。（例えば、「-K_4W89HOwyew6pU78Rq」など）、オブジェクト上のすべてのキーを持つ配列を返し、Array.mapが使用されているObject.keys

(...) 
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() 
    (...) 
}); 

はその中に含まれている値を返しますキーを配列項目として使用します。