Question

我正在为朋友创建折线图，但我无法将“数据”线绘制到屏幕上。我正在使用d3js v4，并且以下代码无法按要求运行：

    $(scope.container).append($('<svg id="svgimg" width="640" height="350" style="margin-left:auto;margin-right:auto;"></svg>'));
        var mainGroup = d3.select("#svgimg").append("g");
        d3.select("#svgimg").call(d3.zoom().on("zoom",function(){
            mainGroup.attr("transform","translate(" + d3.event.transform.x+","+d3.event.transform.y+") scale ("+d3.event.transform.k+")" );
        }));


        var parseTime = d3.timeParse("%d-%b-%y");
        var svg = $("#svgimg"),
        margin = {top:20,right:20,bottom:20,left:20},
        width = +Number(svg.attr("width")) - margin.left -margin.right,
        height = +Number(svg.attr("height")) - margin.top-margin.bottom,
        g = mainGroup.append("g").attr("transform","translate("+margin.left+","+margin.top+")");
        //console.log(width);
        //console.log(height);
        var n = 2000,
            random = d3.randomNormal(0,.2),
            data = d3.range(n).map(random);

        var x =d3.scaleTime()
            .domain([0,n-1])
            .range([0,width]);
        var y = d3.scaleLinear()
            .domain([0,100])
            .range([height,0]);
        var line = d3.line()
            .x(function(d,i){return x(parseTime(d.time));})
            .y(function(d,y){return y(d.distance);});

        g.append("defs").append("clipPath")
            .attr("id","clip")
            .append("rect")
            .attr("width",width)
            .attr("height",height);
        g.append("g")
            .attr("class","axis axis--x")
            .attr("transform","translate(0,"+y(0)+")")
            .call(d3.axisBottom(x));
        g.append("g")
            .attr("class","axis axis--y")
            .call(d3.axisLeft(y));
        g.append("g")
            //.attr("clip-path","url(#clip)")
            .append("path")
            .datum(scope.data)
            .attr("class","linea");

scope.container是div元素。问题是数据线没有显示，如果没有显示，它将是不可能的。 scope.data是一个包含以下字段的项目数组：日期，时间，距离，邮票

提前谢谢。

d3js需要一个缩放时间的线图

0 个答案: