通过div来实现条形图

最新推荐文章于 2024-03-12 15:23:43 发布

Brave_liberty

最新推荐文章于 2024-03-12 15:23:43 发布

阅读量690

点赞数

分类专栏： d3可视化

本文链接：https://blog.youkuaiyun.com/qq_31396185/article/details/79632461

版权

d3可视化专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种利用D3库通过div元素而非传统的svg rect来实现条形图的方法。主要步骤包括添加div元素，应用样式类，或者直接使用style()设置CSS样式。通过classed()方法管理和更新类，同时强调style()设置的样式具有更高的优先级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在d3中，我们一通过svg中rect来绘制条形图，其实也可以通过div简单的色块填充来实现。

总体思路：
添加div元素
添加类（类中设置好css样式）
或者style()直接设置css样式

<style type="text/css">
    div.bar {
        width: 75px;
        height: 100px;
        display: inline-block;
        background-color: blue;

    }

</style>
<body>

</body>
<script type="text/javascript">
    var dataset=[1,2,3,4,5]
    w=500;
    h=300;

    d3.select("body")
        .selectAll("div")
        .data(dataset)
        .enter()
        .append("div")
        .attr("class","bar")
        // .classed("bar",false)
        .style("width",100+"px")
        .style("height",function(d,i){
            return d*10+"px";
        })
        .style("margin-right",function(d,i){
            return 2+"px";
        })
        .style("display","inline-block")
        .style("background-color","pink")

</script>