D3js图表没有生成:控制台上没有错误

时间:2014-02-19 10:55:23

标签: javascript svg d3.js

我是svg和d3js的新手,并且正在关注https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-starting-with-a-basic-graph上的教程

$('#to').on('change',function() {
        var endDate = new Date(Date.parse( $('#to').val()   
                               ));
        var width= 1024;
        var height= 500;
        var margin = {top:20, right:20, top:20, bottom:20}; 
        var parseDate = d3.time.format("%x %H").parse;

        var xAxis = d3.svg.axis().scale(x)
                        .orient("bottom").ticks(30);

        var yAxis = d3.svg.axis().scale(y)
                         .orient("left").ticks(30);

        var valueline = d3.svg.line()
                                .x(function(d) { return x(d.timestamp); })
                                .y(function(d) { return y(d.phaseOne);  return y(d.phaseTwo); return y(d.phaseThree);});


        var svg = d3.select("#graph")
                        .append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                        .append("g")
                            .attr("transform","translate(" + margin.left + "," + margin.top + ")");




        var x = d3.time.scale().range([0, width]);
        var y = d3.scale.linear().range([height, 0]);
        d3.json('<?php echo base_url(); ?>uploads/<?php echo $username; ?>.json',function(error,data){
                data.forEach(function(d){
                    d.timestamp = parseDate(d.timestamp);
                    d.pday_chan1  = +d.day_chan1;
                    d.d.day_chan2  = +d.day_chan2;
                    d.d.day_chan3 = +d.day_chan3;
                });

        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.day_chan1; })]);
        y.domain([0, d3.max(data, function(d) { return d.day_chan2; })]);
        y.domain([0, d3.max(data, function(d) { return d.day_chan3; })]);   

        svg.append("path")
            .attr("d", valueline(data));

        svg.append("g")         // Add the X Axis
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")         // Add the Y Axis
            .attr("class", "y axis")
            .call(yAxis);   
            }); 

    }); 

我试图生成三行,而不是生成一行。代码没有显示任何错误,我对应该从哪里开始调试感到困惑。任何指针将不胜感激。

0 个答案:

没有答案