d3.v4.js 绘制曲线图, 支持鼠标悬停显示数值

来源：互联网发布：js布尔类型怎么用编辑：程序博客网时间：2024/06/13 04:32

d3Test.html

<!DOCTYPE html><meta charset="utf-8"><style> /* set the CSS */body { font: 12px Arial;}path {     stroke: steelblue;    stroke-width: 2;    fill: none;}.axis path,.axis line {    fill: none;    stroke: grey;    stroke-width: 1;    shape-rendering: crispEdges;}div.tooltip {    position: absolute;    text-align: center;    width: 60px;    height: 28px;    padding: 2px;    font: 12px sans-serif;    background: lightsteelblue;    border: 0px;    border-radius: 8px;    pointer-events: none;}</style><body>    <!-- load the d3.js library -->        <script src="http://d3js.org/d3.v3.min.js"></script>    <script>        // Set the dimensions of the canvas / graph        var margin = {top: 30, right: 20, bottom: 30, left: 50},            width = 600 - margin.left - margin.right,            height = 270 - margin.top - margin.bottom;        // Parse the date / time        var parseDate = d3.time.format("%d-%b-%y").parse;        var formatTime = d3.time.format("%e %B");        // Set the ranges        var x = d3.time.scale().range([0, width]);        var y = d3.scale.linear().range([height, 0]);        // Define the axes        var xAxis = d3.svg.axis().scale(x)            .orient("bottom").ticks(5);        var yAxis = d3.svg.axis().scale(y)            .orient("left").ticks(5);        // Define the line        var valueline = d3.svg.line()            .x(function(d) { return x(d.date); })            .y(function(d) { return y(d.close); });        // Define the div for the tooltip        var div = d3.select("body").append("div")            .attr("class", "tooltip")            .style("opacity", 0);        // Adds the svg canvas        var svg = d3.select("body")            .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 + ")");        // Get the data        d3.csv("data.csv", function(error, data) {            data.forEach(function(d) {                d.date = parseDate(d.date);                d.close = +d.close;            });            // Scale the range of the data            x.domain(d3.extent(data, function(d) { return d.date; }));            y.domain([0, d3.max(data, function(d) { return d.close; })]);            // Add the valueline path.            svg.append("path")                .attr("class", "line")                .attr("d", valueline(data));            // Add the scatterplot            svg.selectAll("dot")                .data(data)                .enter().append("circle")                .attr("r", 5)                .attr("cx", function(d) { return x(d.date); })                 .attr("cy", function(d) { return y(d.close); })                .on("mouseover", function(d) {                    div.transition()                        .duration(200)                        .style("opacity", .9);                    div.html(formatTime(d.date) + "<br/>"  + d.close)                        .style("left", (d3.event.pageX) + "px")                        .style("top", (d3.event.pageY - 28) + "px");                })                .on("mouseout", function(d) {                    div.transition()                        .duration(500)                        .style("opacity", 0);                });            // Add the X Axis            svg.append("g")                .attr("class", "x axis")                .attr("transform", "translate(0," + height + ")")                .call(xAxis);            // Add the Y Axis            svg.append("g")                .attr("class", "y axis")                .call(yAxis);        });    </script></body>

data.csv

➜  test cat data.csv date,close1-May-12,58.1330-Apr-12,53.9827-Apr-12,67.0026-Apr-12,89.7025-Apr-12,99.0024-Apr-12,130.2823-Apr-12,166.7020-Apr-12,234.9819-Apr-12,345.4418-Apr-12,443.3417-Apr-12,543.7016-Apr-12,580.1313-Apr-12,605.2312-Apr-12,622.7711-Apr-12,626.2010-Apr-12,628.449-Apr-12,636.235-Apr-12,633.684-Apr-12,624.313-Apr-12,629.322-Apr-12,618.6330-Mar-12,599.5529-Mar-12,609.8628-Mar-12,617.6227-Mar-12,614.4826-Mar-12,606.98

启动http server

➜  test python3 -m http.server 8888

访问网页

http://localhost:8888/d3Test.html

其他

如果使用 chrome 直接打开

➜  test google-chrome d3Test.html

页面无内容, F12 查看, 报错如下

XMLHttpRequest cannot load file:///home/kylin/workspace/test/data.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

如果还是不想启动 http server, 也是有办法的

➜  test google-chrome d3Test.html --allow-file-access-from-files

阅读全文

0 0