javascript - 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通常采用数据元素数组，而不是像您那样的对象。您可以先将数据对象转换为数组，它应该可以工作:

(...)
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用于返回该键中包含的值作为数组项。