我为使用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ú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ércoles</th>";
echo " <th>Jueves</th>";
echo " <th>Viernes</th>";
echo " <th>Sá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;可以拖。但是,工具提示的垂直线仍然像以前一样,它与图表的缩放线不匹配。以下屏幕截图供您参考。
d3版本是4。
有什么建议吗?
谢谢!