在d3.js中导入json文件

Question

在d3.js中导入json文件

我是d3.js的新手,我正在创建d3.js中json数据的折线图.当json数据在html文件中时,代码运行良好但我想从html中提取数据并将数据作为json文件引用.示例index.html如下所示:

<!DOCTYPE html>
<html lang="en">

<body>
            <svg id="visualisation" width="1000" height="500"></svg>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                function InitChart() {
                    var data = [{
                        "sale": "202",
                        "year": "2000"
                    }, {
                        "sale": "215",
                        "year": "2002"
                    }, {
                        "sale": "179",
                        "year": "2004"
                    }, {
                        "sale": "199",
                        "year": "2006"
                    }, {
                        "sale": "134",
                        "year": "2008"
                    }, {
                        "sale": "176",
                        "year": "2010"
                    }];


                    var vis = d3.select("#visualisation"),
                        WIDTH = 1000,
                        HEIGHT = 500,
                        MARGINS = {
                            top: 20,
                            right: 20,
                            bottom: 20,
                            left: 50
                        },
                        xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2000, 2010]),
                        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([134, 215]),
                        xAxis = d3.svg.axis()
                        .scale(xScale),
                        yAxis = d3.svg.axis()
                        .scale(yScale)
                        .orient("left");

                    vis.append("svg:g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                        .call(xAxis);
                    vis.append("svg:g")
                        .attr("class", "y axis")
                        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                        .call(yAxis);
                    var lineGen = d3.svg.line()
                        .x(function(d) {
                            return xScale(d.year);
                        })
                        .y(function(d) {
                            return yScale(d.sale);
                        })
                        .interpolate("basis");
                    vis.append('svg:path')
                        .attr('d', lineGen(data))
                        .attr('stroke', 'green')
                        .attr('stroke-width', 2)
                        .attr('fill', 'none');
                }
                InitChart();
            </script>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

我想拉出json数据并在index.html中引用它,因为实际的json数据是以MB为单位.所以,我保存了数据并将其作为InitChart()函数引用

var data = d3.json("linedata.json");

Run Code Online (Sandbox Code Playgroud)

同时html和json文件位于同一目录中.当我在浏览器(firefox)中打开index.html时,我得到一个空白页面.可能是什么错误？

Answer 1

Ger*_*ado 7

问题:

d3.json在变量中使用.d3.json不返回任何内容(实际上,它返回与请求关联的对象,与文件内容本身无关).

解:

d3.json(url[, callback])改为使用.

说明:

D3提供了一种加载JSON文件的方法.你必须这样做:

d3.json("linedata.json", function(data){
    function initChart(){
        //all your code for initChart here
    };
    initChart();
});

Run Code Online (Sandbox Code Playgroud)

这样,JSON文件中的数据与参数相关联,data并且可以在回调函数中使用.

这是文档:https: //github.com/mbostock/d3/wiki/Requests#d3_json

归档时间：	9 年，7 月前
查看次数：	7464 次
最近记录：	8 年，5 月前