Javascript D3图形示例_Javascript_Json_D3.js

Javascript D3图形示例

javascript json d3.js

Javascript D3图形示例,javascript,json,d3.js,Javascript,Json,D3.js,我正在尝试改编Mike Bostock用d3.js制作的一个图形示例。我试图做的是用d3.json更改d3.csv。我还修改了一些原始代码，但现在我的图形消失了，我没有任何错误，我不知道出了什么问题守则： <!DOCTYPE html> <head> <title> Graphique </title> <script src="d3.js" charset="utf-8"></script>

我正在尝试改编Mike Bostock用d3.js制作的一个图形示例。我试图做的是用

d3.json

更改

d3.csv

。我还修改了一些原始代码，但现在我的图形消失了，我没有任何错误，我不知道出了什么问题

守则：

 <!DOCTYPE html>

<head>
    <title> Graphique </title>
    <script src="d3.js" charset="utf-8"></script>
    <script src="d3.min.js" charset="utf-8"></script>
</head>

<body>

<svg width="960" height="500"></svg>
<script>
    var svg = d3.select("svg"),
        margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 60
        },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var parseDate = d3.timeParse("%Y%m%d"),
        formatDate = d3.timeFormat("%Y");

    var x = d3.scaleTime()
        .domain([new Date(1999, 0, 1), new Date(2003, 0, 0)])
        .range([0, width]);

    var y = d3.scaleLinear()
        .range([height, 0]);

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y);

    var area = d3.area()
        .curve(d3.curveStepAfter)
        .y0(y(0))
        .y1(function(d) {
            return y(d.NbCopie);
        });

    var areaPath = g.append("path")
        .attr("clip-path", "url(#clip)")
        .attr("fill", "steelblue");

    var yGroup = g.append("g");

    var xGroup = g.append("g")
        .attr("transform", "translate(0," + height + ")");

    var zoom = d3.zoom()
        .scaleExtent([1 / 4, 8])
        .translateExtent([
            [-width, -Infinity],
            [2 * width, Infinity]
        ])
        .on("zoom", zoomed);

    var zoomRect = svg.append("rect")
        .attr("width", width)
        .attr("height", height)
        .attr("fill", "none")
        .attr("pointer-events", "all")
        .call(zoom);

    g.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

    d3.json("data.json", function(d) {
        d.Date_Id = parseDate(d.Date_Id);
        d.NbCopie = +d.NbCopie;
        return d;
    }, function(error, data) {
        if (error) throw error;
        var xExtent = d3.extent(data, function(d) {
            return d.Date_Id;
        });
        zoom.translateExtent([
            [x(xExtent[0]), -Infinity],
            [x(xExtent[1]), Infinity]
        ])
        y.domain([0, d3.max(data, function(d) {
            return d.NbCopie;
        })]);
        yGroup.call(yAxis).select(".domain").remove();
        areaPath.datum(data);
        zoomRect.call(zoom.transform, d3.zoomIdentity);
    });

    function zoomed() {
        var xz = d3.event.transform.rescaleX(x);
        xGroup.call(xAxis.scale(xz));
        areaPath.attr("d", area.x(function(d) {
            return xz(d.Date_Id);
            }));
        }
    </script>
</body>

</html>

（这是一个重复。有趣的是，我试图结束这个问题，却发现我关于这个问题的几个答案没有一个被接受或有投票权，所以系统不允许我结束这个问题）

这里的问题很简单：与

d3.csv

函数不同，

d3.json

不接受行函数

就你而言

d3.json("data.json", function(d) {
            d.Date_Id = parseDate(d.Date_Id);
            d.NbCopie = +d.NbCopie;
            return d;
        }, function(error, data) {

。。。紧跟在

“data.json”

之后和

函数（错误，数据）

之前的函数是行函数

解决方案：只需执行以下操作：

d3.json("data.json", function(error, data) {

并将row函数移动到a

forEach

（回调内部）：

哇，投赞成票！现在我可以结束未来的问题，问同样的问题！

d3.json("data.json", function(error, data) {

data.forEach(function(d) {
    d.Date_Id = parseDate(d.Date_Id);
    d.NbCopie = +d.NbCopie;
})