javascript - 在 D3js 甘特图中的栏上添加工具提示-6ren

javascript - 在 D3js 甘特图中的栏上添加工具提示

转载作者：行者123 更新时间：2023-12-03 05:47:03

我编写了一个示例 HTML、CSS 和 Javascript 来显示甘特图

我的 HTML 代码

<!DOCTYPE html>
<html>
<head>
<title>Gantt Chart Example 2</title>
<link type="text/css" href="http://mbostock.github.io/d3/style.css" rel="stylesheet" />
<link type="text/css" href="example.css" rel="stylesheet" />
</head>
<body>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v21.js"></script>
    <script type="text/javascript" src="example2.js"></script>
</body>
</html>

我的 CSS 文件 - example.css

html,body,#wrapper {
    width: 100%;
    height: 100%;
    margin: 0px;
}

.chart {
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.axis path,.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.bar {
    fill: #33b5e5;
}

.bar-failed {
    fill: #CC0000;
}

.bar-running {
    fill: #669900;
}

.bar-succeeded {
    fill: #33b5e5;
}

.bar-killed {
    fill: #ffbb33;
}

#forkme_banner {
    display: block;
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 10;
    padding: 10px 50px 10px 10px;
    color: #fff;
    background:
        url('http://dk8996.github.io/Gantt-Chart/images/blacktocat.png')
        #0090ff no-repeat 95% 50%;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    text-decoration: none;
}

我的 JS 文件

var tasks = [
    { "startDate": new Date("Sun Dec 09 01:36:45 EST 2012"), "endDate": new Date("Sun Dec 09 02:36:45 EST 2012"), "taskName": "E Job", "status": "RUNNING" },
    { "startDate": new Date("Mon Dec 10 01:36:45 EST 2012"), "endDate": new Date("Mon Dec 10 02:36:45 EST 2012"), "taskName": "A Job", "status": "RUNNING" },
    { "startDate": new Date("Mon Dec 11 01:36:45 EST 2012"), "endDate": new Date("Mon Dec 11 02:36:45 EST 2012"), "taskName": "B Job", "status": "SUCCEEDED" }
];

var taskStatus = {
    "SUCCEEDED": "bar",
    "FAILED": "bar-failed",
    "RUNNING": "bar-running",
    "KILLED": "bar-killed"
};

var taskNames = ["A Job", "B Job", "C Job", "D Job", "E Job"];

tasks.sort(function(a, b) {
    return a.endDate - b.endDate;
});
var maxDate = tasks[tasks.length - 1].endDate;
tasks.sort(function(a, b) {
    return a.startDate - b.startDate;
});
var minDate = tasks[0].startDate;

var format = "%H:%M:%S";

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);
//gantt.timeDomain([new Date("Sun Dec 09 04:54:19 EST 2012"),new Date("Sun Jan 09 04:54:19 EST 2013")]);
//gantt.timeDomainMode("fixed");
gantt(tasks);

我想在鼠标悬停在其上方时添加一个工具提示(工具提示中包含 HTML 代码)，并在彩色坏点上添加一个标签。我该怎么做？

最佳答案

自己构建工具提示:

一些 HTML 代码如下:

<div id="tooltip" class="tooltip" style="opacity: 0">
    <p>Name:<br/><span id="tooltip-name"></span></p>
    <p>Status:<br/><span id="tooltip-status"></span></p>
</div>

一些CSS:

.tooltip {
        position: absolute;
        line-height: 1;
        font-size: 10px;
        padding: 8px 10px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
        pointer-events: none;
        font-weight: bold;
        max-width: 300px;
    }

    .tooltip:after {
        box-sizing: border-box;
        display: inline;
        font-size: 10px;
        width: 100%;
        line-height: 1;
        color: rgba(0, 0, 0, 0.8);
        content: "\25BC";
        position: absolute;
        text-align: center;
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
    }

构建甘特图后，获取相应的元素并附加事件处理程序:

// I had a quick look and it seems you want those rectangles
d3.selectAll('.gantt-chart rect')
  .on('mouseover', function (d) {
    hoverIn(this, d)
  })
  .on('mouseout', hoverOut)

这是 hoverIn 的示例:

function hoverIn (ctx, val) {

// Get dimensions of your Gantt bar
var dimBar = ctx.getBoundingClientRect()

// Fill tooltip elements
d3.select('#tooltip-name').text(val.taskName)
d3.select('#tooltip-status').text(val.status)

// Get dimension of your tooltip
var dimTip = document.getElementById('tooltip')
  .getBoundingClientRect()

// Position your tooltip 
d3.select('#tooltip')
  // Should be about the middle of your bar
  .style('left', (dimBar.left + dimBar.width / 2 - dimTip.width / 2)
    + 'px')
  // scrollY to catch any offset from scrolling
  .style('top', (window.scrollY + dimBar.top - dimTip.height / 2
    - 10) + 'px')
  .transition().duration(250)
    .style('opacity', 1)
}

隐藏工具提示:

function hoverOut () {
  d3.select('#tooltip')
    .transition().duration(250)
      .style('opacity', 0)
}

关于javascript - 在 D3js 甘特图中的栏上添加工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40299276/

文章推荐： javascript - JQuery 函数 fn() 未定义

文章推荐： svn 本地副本中修改的文件列表

文章推荐： language-agnostic - 将字符串转换为摩尔斯电码

文章推荐： javascript - 完成 html 视频后转到其他页面

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 D3js 甘特图中的栏上添加工具提示