d3fc打造一个三维K线图牛市上升交互效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：d3fc打造一个三维K线图牛市上升交互效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/d3fc/5.2.0/d3fc.min.css'>
<style>
#viewport {
    margin: 20px auto;
    background: black;
    overflow: hidden;
    perspective: 100px;
    transform-style: preserve-3d;
}

@keyframes camera-path {
    from {
        transform: rotateX(13deg) rotateY(9deg) translate3d(165px, -4px, 26px);
    }
    to {
        transform: rotateX(-1deg) rotateY(8deg) translate3d(165px, -4px, 52px);
    }
}

#camera {
    padding-bottom: 56.25%;
    transform-style: preserve-3d;
    animation: camera-path 15s linear 0s infinite alternate;
}

#background {
    position: absolute;
    transform: translateZ(-30px);
}

#midground {
    position: absolute;
}

#foreground {
    position: absolute;
    transform: translateZ(20px);
}

.annotation>line {
    stroke: rgb(255, 255, 51);
    stroke-dasharray: 0;
    stroke-opacity: 0.5;
}

.gridline {
    stroke: white;
    stroke-dasharray: 1, 2;
}

.candlestick>.up {
    fill: white;
    stroke: rgba(77, 175, 74, 1);
}
.candlestick>.down {
    fill: black;
    stroke: rgba(77, 175, 74, 1);
}

.bollinger-bands>.area,
.bollinger-bands>.average {
    visibility: hidden;
}
.bollinger-bands>.upper>path {
    stroke: rgba(55, 126, 184, 1);
    stroke-width: 2px;
}
.bollinger-bands>.lower>path {
    stroke: rgba(77, 175, 74, 1);
    stroke-width: 2px;
}

.ema>path {
    stroke: rgba(228, 26, 28, 1);
    stroke-width: 2px;
}

.label {
    stroke: white;
    text-anchor: initial;
}
</style>

</head>
<body translate="no">
<div id="viewport">
<div id="camera">
<svg id="background" viewbox="0 0 1024 576" mask="url(#mask)">
<g id="vertical-lines" />
</svg>
<svg id="midground" viewbox="0 0 1024 576">
<defs>
<mask id="mask">
<rect width="1024" height="576" fill="white" />
<rect width="1024" height="576" fill="url(#mask-horizontal-gradient)" />
<rect width="1024" height="576" fill="url(#mask-vertical-gradient)" />
<linearGradient id="mask-horizontal-gradient" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-opacity="1" />
<stop offset="30%" stop-opacity="0" />
<stop offset="70%" stop-opacity="0" />
<stop offset="100%" stop-opacity="1" />
</linearGradient>
<linearGradient id="mask-vertical-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-opacity="1" />
<stop offset="30%" stop-opacity="0" />
<stop offset="70%" stop-opacity="0" />
<stop offset="100%" stop-opacity="1" />
</linearGradient>
</mask>
<filter id="blur" x="0%" y="0%" width="30%" height="100%">
<feImage xlink:href="#series" x="0" y="0" width="1024" height="576" result="image" />
<feGaussianBlur in="image" stdDeviation="5" />
</filter>
<mask id="blur-mask" x="0%" y="0%" width="30%" height="100%">
<rect width="1024" height="576" fill="url(#blur-mask-gradient)" />
<linearGradient id="blur-mask-gradient" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="white" />
<stop offset="30%" stop-color="black" />
</linearGradient>
</mask>
<mask id="inverted-blur-mask" x="0%" y="0%" width="100%" height="100%">
<rect width="1024" height="576" fill="url(#inverted-blur-mask-gradient)" />
<linearGradient id="inverted-blur-mask-gradient" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="black" />
<stop offset="30%" stop-color="white" />
</linearGradient>
</mask>
<filter id="flare" x="40%" y="30%" width="11%" height="40%">
<feImage xlink:href="#series" x="0" y="0" width="1024" height="576" result="image" />
<feFlood flood-color="white" result="white-flood" />
<feComposite in="white-flood" in2="image" operator="atop" result="white-image" />
<feGaussianBlur in="white-image" stdDeviation="3" result="white-blur" />
<feColorMatrix type="saturate" in="image" values="10" result="saturated-image" />
<feComposite in="white-blur" in2="saturated-image" operator="over" />
</filter>
<mask id="flare-mask" x="40%" y="30%" width="11%" height="40%">
<rect width="1024" height="576" fill="url(#flare-mask-gradient)" />
<linearGradient id="flare-mask-gradient" x1="0" x2="1" y1="0" y2="0">
<stop offset="40%" stop-color="black" />
<stop offset="45%" stop-color="white" />
</linearGradient>
</mask>
</defs>
<g id="gridlines" mask="url(#mask)" />
<g mask="url(#inverted-blur-mask)">
<g id="series" />
</g>
<g filter="url(#blur)" mask="url(#blur-mask)" />
<g filter="url(#flare)" mask="url(#flare-mask)" />
</svg>
<svg id="foreground" viewbox="0 0 1024 576">
<g id="labels" mask="url(#mask)" />
</svg>
</div>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/d3fc.bundle.js"></script>
<script>
(function (d3, fc) {
  "use strict";

  // SVG viewbox constants
  var WIDTH = 1024,HEIGHT = 576;

  // Obviously you should use ES6 modules and mutiple files for this. I"m
  // trying to keep the example as simple (and copy/paste-able) as possible.
  var basecoin = {};

  basecoin.verticalLines = function () {

    return function (selection) {

      selection.each(function (data) {

        var xScale = d3.time.scale().
        domain(data.xDomain)
        // Use the full width
        .range([0, WIDTH]);

        // Use the simplest scale we can get away with
        var yScale = d3.scale.linear()
        // Define an arbitrary domain
        .domain([0, 1])
        // Use the full height
        .range([HEIGHT, 0]);

        var line = fc.annotation.line().
        value(function (d) {return d.date;}).
        orient("vertical").
        xScale(xScale).
        yScale(yScale);

        d3.select(this).
        datum(data).
        call(line);
      });
    };
  };

  basecoin.gridlines = function () {

    return function (selection) {

      selection.each(function (data) {

        // Use the simplest scale we can get away with
        var xScale = d3.scale.linear().
        domain([data[0].date, data[data.length - 1].date])
        // U.........完整代码请登录后点击上方下载按钮下载查看