毕业设计代码记录

最新推荐文章于 2022-06-12 22:07:55 发布

商商-77

最新推荐文章于 2022-06-12 22:07:55 发布

阅读量745

点赞数

本文链接：https://blog.csdn.net/umgsai/article/details/50634197

版权

最近开始搞毕业论文了，亚历山大，记录一点毕业设计需要用的代码

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>颜色插值</title>  
  </head> 
  <style>

  </style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var width = 400,
    height = 400;
    
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var a = d3.rgb(255,0,0);    //红色
var b = d3.rgb(0,255,0);    //绿色
 
var compute = d3.interpolate(a,b);

var linear = d3.scale.linear()
                .domain([0,150])
                .range([0,1]);

var rects = svg.selectAll("rect")
                .data(d3.range(150))
                .enter()
                .append("rect")
                .attr("x",function(d,i){
                    return i%15 * 15;
                })
                .attr("y",function(d,i){
                    return Math.floor(i/15) * 15;
                })
                .attr("width",15)
                .attr("height",15)
                .style("fill",function(d){
                    return compute(linear(d));
                })
                .on("mouseover",function(d){
                    d3.select(this)
                        .style("fill","yellow");
                })
                .on("mouseout",function(d){
                    d3.select(this)
                        .style("fill",compute(linear(d)).toString());
                });


//定义一个线性渐变
var defs = svg.append("defs");

var linearGradient = defs.append("linearGradient")
                        .attr("id","linearColor")
                        .attr("x1","0%")
                        .attr("y1","0%")
                        .attr("x2","100%")
                        .attr("y2","0%");

var stop1 = linearGradient.append("stop")
                .attr("offset","0%")
                .style("stop-color",a.toString());

var stop2 = linearGradient.append("stop")
                .attr("offset","100%")
                .style("stop-color",b.toString());

//添加一个矩形，并应用线性渐变
var colorRect = svg.append("rect")
                .attr("x", 15)
                .attr("y", 200)
                .attr("width", 200)
                .attr("height", 30)
                .style("fill","url(#" + linearGradient.attr("id") + ")")
                .on("mouseover",function(d){
                    d3.select(this)
                        .style("fill","yellow");
                })
                .on("mouseout",function(d){
                    d3.select(this)
                        .style("fill","url(#" + linearGradient.attr("id") + ")");
                });



</script>
        
    </body>  
</html>

转自：http://www.ourd3js.com/wordpress/?p=1111

http://www.hcharts.cn/demo/highmaps.php
http://d3js.org/
http://www.ourd3js.com/wordpress/?p=1111
http://blog.csdn.net/kalision/article/details/40503393

商商-77

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
毕业设计代码记录

最近开始搞毕业论文了，亚历山大，记录一点毕业设计需要用的代码颜色插值 var width = 400, height = 400; var svg = d3.select("body").append("svg") .attr("width", width) .attr("he
复制链接

扫一扫