在D3js甘特图中添加工具提示

Adding tooltips on a bar in Gantt Chart in D3js

本文关键字：添加 工具提示 D3js      更新时间：2023-09-26

我已经写了一个示例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>

My CSS File - 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;
}

My JS File

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)
}

首先包含以下脚本标签:

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

创建如下css:

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip: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;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
在你的JS文件中包括以下内容: 
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "**value of string**";
  })

在实例化svg变量之后，使用

调用工具提示:
svg.call(tip);

最后，在要显示的元素中添加以下内容:

.on('mouseover', tip.show)
    .on('mouseout', tip.hide);
相关文章：