Question

我已经编写了一个示例HTML，CSS和Javascript来显示Gantt Charts

我的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代码），并在彩色坏处上添加标签。我该怎么做？

Answer 1

自己构建工具提示：

这样的一些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)
}

Answer 2

首先包括以下脚本标记：

date DATE_TRUNC('month', CURRENT_DATE - integer 15) - interval '1 month'

创建以下css：

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

在您的JS文件中包含以下内容：

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

在实例化svg变量之后，使用以下命令调用工具提示：

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "**value of string**";
  })

最后，将以下内容添加到要显示的元素中：

svg.call(tip);

你有它。

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

2 个答案: