D3 交互

最新推荐文章于 2021-10-24 08:37:36 发布

Claroja

最新推荐文章于 2021-10-24 08:37:36 发布

阅读量334

点赞数

分类专栏： D3 文章标签：可视化

本文链接：https://blog.csdn.net/claroja/article/details/79868985

版权

D3 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

<html>
    <body>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
            var width = 300;  //画布的宽度
            var height = 300;   //画布的高度

            var svg = d3.select("body")     //选择文档中的body元素
                .append("svg")          //添加一个svg元素
                .attr("width", width)       //设定宽度
                .attr("height", height);    //设定高度
            var rect = svg.append("rect")  //添加一个矩形
                .attr("x",50)
                .attr("y",50)
                .attr("width",50)
                .attr("height",50)
                .attr("fill","red")
                .on("mouseover",function(){
                    d3.select(this)  //this传入的当前的元素标签，这个在处理一组元素的时候很有用
                        .attr("fill","yellow");})
                .on("mouseout",function(){
                    d3.select(this)
                        .attr("fill","blue");});
        </script>
    </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Claroja

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3 交互

&lt;html&gt; &lt;body&gt; &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt; &lt;script&gt; var width = 300; //画布的宽度 var
复制链接

扫一扫