Question

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

这是一个数据的jfiddle，可视化它的样子......第一个是好的，第二个不是那么多。 http://jsfiddle.net/4VU7w/

这是dimplejs的问题吗？

....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;


}

Answer 1

看起来很像这个问题：https://github.com/PMSI-AlignAlytics/dimple/issues/34

我无法在您的代码中看到是否是这种情况，但如果是这样，则问题中将讨论解决方法。

dimplejs散点图以不同的方式显示第二次在页面上生成的时间

1 个答案: