d3:图表缩放对工具提示没有影响

时间:2016-09-12 12:11:03

标签: javascript d3.js

我为使用d3和Angular 2构建的多系列折线图添加了缩放功能。此外,该图表还能够显示垂直线,每个线的垂直位置都有工具提示(我跟着this)。以下是我的代码。

<?php

Class TBG {

    /*
     * #####################################################################################
     * ##################### Partes de Librerías Importantes ###############################
     * #####################################################################################
     */

    private static function initialCheck($param1, $param2, $param3) {

        if(!isset($param1) || !isset($param2) || !isset($param3)){
            return true;
        }
        return false;

    }
    private static function executeQuery($mysqli_table_name, $connection, $rown){

        if(self::initialCheck($mysqli_table_name, $connection, $rown)){
            return;
        }

        $sql = "SELECT * FROM $mysqli_table_name WHERE id = $rown";
        $result = mysqli_query($connection, $sql);

        return $result;
    }
    private static function checkEmptyTable($result){

        if(self::initialCheck(" ", $result, " ")){
            return;
        }

        if($result -> num_rows === 0){
            echo "<center><h4>Esta tabla no ha sido a&uacute;n generada.</h4></center>";
            return true;
        }
        return false;

    }

    /*
     * #####################################################################################
     * ################################ Librerías ##########################################
     * #####################################################################################
     */

    ///////////////////////////////////

    private static function getAmountOfRows($result){

        if(self::initialCheck(" ", $result, " ")){
            return;
        }

        return $row_max = $result->num_rows;

    }

    private static function getAssociated($result){

        if(self::initialCheck(" ", $result, " ")){
            return;
        }

        return $row = mysqli_fetch_assoc($result);

    }

    ///////////////////////////////////

    private static function timeStart($row){

        if(self::initialCheck(" ", $row, " ")){
            return;
        }

        switch (strlen($row["time_start"])) {
            case 4:
                return $time_start = substr($row["time_start"], 0, -2).":".substr($row["time_start"], 2, 0);
            case 3:
                return $time_start = "0".substr($row["time_start"], 0, -2).":".substr($row["time_start"], 1, 0);
            case 2:
                return $time_start = "00:".$row["time_start"];
            case 1:
                switch ($row["time_start"]) {
                    case 0:
                        return $time_start = "00:00";
                    default:
                        return $time_start = "00:0".$row["time_start"];
                }
            default:
                break;
        }

    }
    private static function timeEnd($row){

        if(self::initialCheck(" ", $row, " ")){
            return;
        }

        switch (strlen($row["time_end"])) {
            case 4:
                return $time_end = substr($row["time_end"], 0, -2).":".substr($row["time_end"], 2, 0);
            case 3:
                return $time_end = "0".substr($row["time_end"], 0, -2).":".substr($row["time_end"], 1, 0);
            case 2:
                return $time_end = "00:".$row["time_end"];
            case 1:
                switch ($row["time_end"]) {
                    case 0:
                        return $time_end = "00:00";
                    default:
                        return $time_end = "00:0".$row["time_end"];
                }
            default:
                break;
        }

    } 

    ///////////////////////////////////

    /*
     * #####################################################################################
     * ############################ Partes Importantes #####################################
     * #####################################################################################
     */

    private static function generateTableHeader(){

        echo "<table class=\"global-tables-table\">";
        echo "  <tr>";
        echo "    <th>Tiempo</th>";
        echo "    <th>Lunes</th>";
        echo "    <th>Martes</th>";
        echo "    <th>Mi&eacute;rcoles</th>";
        echo "    <th>Jueves</th>";
        echo "    <th>Viernes</th>";
        echo "    <th>S&aacute;bado</th>";
        echo "    <th>Domingo</th>";
        echo "  </tr>";

    }
    private static function generateTableBody($row, $time_start, $time_end){

        if(self::initialCheck($row, $time_start, $time_end)){
            return;
        }

        echo "  <tr>";
        echo "    <td>".$time_start." - ".$time_end."</td>";
        echo "    <td>".$row["monday"]."</td>";
        echo "    <td>".$row["tuesday"]."</td>";
        echo "    <td>".$row["wednesday"]."</td>";
        echo "    <td>".$row["thursday"]."</td>";
        echo "    <td>".$row["friday"]."</td>";
        echo "    <td>".$row["saturday"]."</td>";
        echo "    <td>".$row["sunday"]."</td>";
        echo "  </tr>";



    }
    private static function generateTableFooter(){
        echo "</table>";
    }

    public static function generateTable($mysqli_table_name, $connection) {

        if(self::initialCheck($mysqli_table_name, $connection, " ")){
            return;
        }

        if(self::checkEmptyTable(self::executeQuery($mysqli_table_name, $connection, 0))){
            return;
        }

        self::generateTableHeader();
        for ($i = 0; $i < self::getAmountOfRows(self::executeQuery($mysqli_table_name, $connection, 0)); $i++) {
            self::generateTableBody(self::getAssociated(self::executeQuery($mysqli_table_name, $connection, $i)),
                    self::timeStart(self::getAssociated(self::executeQuery($mysqli_table_name, $connection, $i))),
                    self::timeEnd(self::getAssociated(self::executeQuery($mysqli_table_name, $connection, $i))));
        }
        self::generateTableFooter();

    }

}

现在可以在鼠标滚轮上放大图表&amp;可以拖。但是,工具提示的垂直线仍然像以前一样,它与图表的缩放线不匹配。以下屏幕截图供您参考。

enter image description here

d3版本是4。

有什么建议吗?

谢谢!

0 个答案:

没有答案