Dimplejs散点图在页面上第二次生成时显示不同

我有一个函数，使用dimplejs在同一页面上创建三个散点图。我传入了一些变量，您可以在下面的代码中看到。第一个散点图生成完美，但第二个和第三个散点图存在X轴日期不垂直的问题，并且y轴描述更靠近轴并卡在细节后面。

这是一个数据的jfiddle来可视化它看起来像什么…第一个很好，第二个就不那么好了。http://jsfiddle.net/4VU7w/

这是酒窝的问题吗?

....blah blah blah...
    print_dimple_scatterplot_time($speco_arrival_times,$div_to_display_in,'date', 'Arrival Time',
                                'Date of Arrival','Truck Arrival Time','Inbound Trucks to '.$site_name,'Circles Represent Truck Arrival Times');


function print_dimple_scatterplot_time($source_array,$location_div,$x_key_field_name, $y_key_field_name,
                                    $xAxis_name,$yAxis_name,$chart_title,$legend_desc){
/*****Example
$x_key_field_name = 'date'
$y_key_field_name = 'Arrival Time'
$legend_desc = 'Circles Represent Truck Arrival Time'
*******/
$insert_string = json_encode($source_array);
$to_print_string = <<<EOT
<script type="text/javascript"> 
            var data = {$insert_string};
            var svg = dimple.newSvg("#{$location_div}", 900, 400);
            // Draw a standard chart using the aggregated data
            var chart = new dimple.chart(svg, data);
            chart.setBounds(100, 50, 800, 250) //(x,y,width,height)
            var x = chart.addCategoryAxis("x", "{$x_key_field_name}");
            x.addOrderRule("date");
            x.showGridlines = true; //add vertical grid lines
            var y = chart.addTimeAxis("y", "{$y_key_field_name}", "%H:%M", "%H:%M");
            y.timePeriod = d3.time.hours;
            y.timeInterval = 1;
            y.showGridlines = true; //add horizontal grid lines
            y.overrideMin = d3.time.format("%H:%M").parse("00:00");
            y.overrideMax = d3.time.format("%H:%M").parse("23:59");
            // Override color
            chart.defaultColors = [
             new dimple.color("#0000A0")
            ];
            var s = chart.addSeries("date", dimple.plot.bubble);
            chart.draw();
            //added so zeros don't show up.
            s.shapes.style("opacity", function (d) {
                return (d.y === "" ? 0 : 0.6);
            });
            x.shapes.selectAll("text").attr("transform",
                function (d) {
                  return d3.select(this).attr("transform") + " translate(0, 0) rotate(0)"; //translate(x left and right, y up and down)
                });
            x.titleShape.text("{$xAxis_name}"); //name x axis
            x.titleShape.attr("y",chart.height+125); //move where x-axis is
            y.titleShape.text("{$yAxis_name}"); //name y axis
            y.titleShape.attr("y", 175); //move where y-axis is
            //Add Title
            svg.append("text")
                .attr("x", 275 )//(width / 2))             
                .attr("y", 20) //0 - (margin.top / 2))
                .attr("text-anchor", "middle")  
                .style("font-size", "20px") 
                .style("text-decoration", "underline")  
                .text("{$chart_title}");
            //Add Custom Legend
            svg.append("circle")
                .attr("cx", 500 )//(width / 2))             
                .attr("cy", 15) //0 - (margin.top / 2))
                .attr("r",5);
            //Add Customs Legend Text
            svg.append("text")
                .attr("x", 510 )//(width / 2))             
                .attr("y", 20) //0 - (margin.top / 2))
                .attr("text-anchor", "left")  
                .style("font-size", "12px") 
                .style("text-decoration", "underline")  
                .text("{$legend_desc}");
        </script>
EOT;
echo $to_print_string;

}