d3.js (v3)折线图上的工具提示

在D3.js（版本3）中创建折线图并添加工具提示（tooltip）可以通过以下步骤实现。以下是一个简单的示例，展示了如何创建一个带有工具提示的折线图。

HTML结构

首先，创建一个基本的HTML结构，包含一个用于绘制图表的容器和一个用于显示工具提示的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Line Chart with Tooltip</title>
    <style>
        /* 基本的样式 */
        .chart {
            font-family: Arial, sans-serif;
        }
        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 2px;
        }
        .tooltip {
            position: absolute;
            text-align: center;
            width: 100px;
            height: 28px;
            padding: 2px;
            font: 12px sans-serif;
            background: lightsteelblue;
            border: 0px;
            border-radius: 8px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="chart"></div>
    <div class="tooltip" style="opacity:0;"></div>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码

接下来，编写JavaScript代码来创建折线图并添加工具提示功能。

// 数据
var data = [
    { date: new Date(2021, 0, 1), value: 5 },
    { date: new Date(2021, 0, 2), value: 9 },
    { date: new Date(2021, 0, 3), value: 7 },
    { date: new Date(2021, 0, 4), value: 5 },
    { date: new Date(2021, 0, 5), value: 11 },
    { date: new Date(2021, 0, 6), value: 13 },
    { date: new Date(2021, 0, 7), value: 17 }
];

// 设置图表的宽度和高度
var margin = { top: 20, right: 30, bottom: 30, left: 40 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// 创建SVG容器
var svg = d3.select(".chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 设置x轴和y轴的比例尺
var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

// 设置x轴和y轴的域
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.value; }));

// 添加x轴
svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

// 添加y轴
svg.append("g")
    .call(d3.svg.axis().scale(y).orient("left"));

// 创建折线生成器
var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

// 添加折线
svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

// 工具提示
var tooltip = d3.select(".tooltip");

// 添加鼠标事件
svg.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", function(d) { return y(d.value); })
    .attr("r", 5)
    .on("mouseover", function(event, d) {
        tooltip.transition()
            .duration(200)
            .style("opacity", .9);
        tooltip.html("Date: " + d.date + "<br/>Value: " + d.value)
            .style("left", (event.pageX + 5) + "px")
            .style("top", (event.pageY - 28) + "px");
    })
    .on("mouseout", function(d) {
        tooltip.transition()
            .duration(500)
            .style("opacity", 0);
    });

解释

HTML结构：创建了一个包含SVG容器和工具提示元素的HTML页面。
JavaScript代码：
- 定义数据集。
- 设置图表的宽度和高度，并创建SVG容器。
- 设置x轴和y轴的比例尺，并定义它们的域。
- 添加x轴和y轴。
- 创建折线生成器，并添加折线。
- 创建工具提示元素，并添加鼠标事件以显示和隐藏工具提示。

通过这些步骤，你可以在D3.js（版本3）中创建一个带有工具提示的折线图。