文章/答案/技术大牛

发布

社区首页 >问答首页 >D3图实例

问D3图实例
EN

Stack Overflow用户

提问于 2017-05-29 09:14:09

回答 1查看 143关注 0票数 1

我试图用d3.js改编的一个图表的例子。我想要做的是用d3.json更改d3.json。我还修改了一些原始代码，但是现在我的图形消失了，没有任何错误，我不知道出了什么问题。

守则：

 <!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>

在这里，json文件：

[
{
    "ConsoPhot_Id": "10148",
    "idLotImport": 390,
    "Date_Id": 20170201,
    "Orga_Id": "203938",
    "NbTache": 153,
    "NbCopie": 798,
    "NbCopieBW": 488,
    "NbCopieCouleur": 310,
    "MtTotal": 13.69
},
{
    "ConsoPhot_Id": "10602",
    "idLotImport": 391,
    "Date_Id": 20161201,
    "Orga_Id": "203938",
    "NbTache": 153,
    "NbCopie": 909,
    "NbCopieBW": 779,
    "NbCopieCouleur": 130,
    "MtTotal": 7.93
},
{
    "ConsoPhot_Id": "10905",
    "idLotImport": 392,
    "Date_Id": 20161101,
    "Orga_Id": "203938",
    "NbTache": 115,
    "NbCopie": 515,
    "NbCopieBW": 409,
    "NbCopieCouleur": 106,
    "MtTotal": 5.6
},
{
    "ConsoPhot_Id": "11162",
    "idLotImport": 393,
    "Date_Id": 20161001,
    "Orga_Id": "203938",
    "NbTache": 233,
    "NbCopie": 1173,
    "NbCopieBW": 725,
    "NbCopieCouleur": 448,
    "MtTotal": 19.86
},
{
    "ConsoPhot_Id": "11745",
    "idLotImport": 394,
    "Date_Id": 20170101,
    "Orga_Id": "203938",
    "NbTache": 173,
    "NbCopie": 889,
    "NbCopieBW": 782,
    "NbCopieCouleur": 107,
    "MtTotal": 7.07
},
{
    "ConsoPhot_Id": "12144",
    "idLotImport": 435,
    "Date_Id": 20170301,
    "Orga_Id": "203938",
    "NbTache": 131,
    "NbCopie": 590,
    "NbCopieBW": 454,
    "NbCopieCouleur": 136,
    "MtTotal": 6.92
}
]

javascript

json

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-05-29 09:24:09

(这是一个复制品。有趣的是，我试图结束这个问题，却发现我关于这个问题的几个答案都没有被接受，也没有人投赞成票，所以系统不允许我关闭这个问题)。

这里的问题很简单:与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"之后和function(error, data)之前的函数是row函数。

解决方案：只需：

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

并将row函数移动到forEach (回调内部)：

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44238744

复制

相似问题

问D3图实例
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3图实例EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3图实例
EN