【学习】D3绘图，（目的：绑定文本数据，加箭头）

最新推荐文章于 2024-07-17 14:46:11 发布

神创

最新推荐文章于 2024-07-17 14:46:11 发布

阅读量1.4k

点赞数 1

分类专栏： d3 可视化 html

本文链接：https://blog.csdn.net/qq_19741181/article/details/79528245

版权

本文详细介绍了如何使用D3.js库进行数据绑定，并展示了如何在图表中添加箭头，旨在帮助读者掌握D3.js的高级绘图技巧。

摘要由CSDN通过智能技术生成

上图：

------------------------------------------------------------------

代码

<html>
    
<body>
    <script src="http://d3js.org/d3.v3.min.js">
    
    </script>
    <script>
      var width = 400;
        var height = 400;
        
        
        var svg = d3.select("body")
            .append("svg")
            .attr("width",width)
            .attr("height",height);
        
        var padding = {top: 20 ,right: 20,bottom:20,left:20};
        


        svg.append("rect")
            .attr("fill","red")
            .attr("x",20)
            .attr("y",18)
            .attr("width",100)
            .attr("height",300)
            .transition()
            .attr("width",300)
    </script>
    <p>This is a text</p>
    

    
</body>
</html>

------------------------------------------------------------------------------