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将该键中包含的值作为数组项返回。

D3无法渲染简单的线条

1 个答案: