【D3.js数据可视化系列教程】--（十一）散点图

最新推荐文章于 2024-05-28 11:11:34 发布

司机大傻

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量1.6w

点赞数 10

分类专栏：数据可视化 D3数据可视化系列教程文章标签： d3 d3.js d3js 数据可视化

本文链接：https://blog.csdn.net/tianxuzhang/article/details/11375203

版权

数据可视化同时被 2 个专栏收录

44 篇文章 48 订阅

订阅专栏

D3数据可视化系列教程

36 篇文章 205 订阅

订阅专栏

1. 一般的散点绘制

散点图的绘制思路：

准备输入数据，用二维数组表示每个点的坐标
绘制SVG，并绑定数据
绘制圆元素，并用绑定的数据设置圆的属性

以下就是这个思路的实现，下面我们会介绍下调整的办法。

//高宽
var w = 500;
var h = 100;

var dataset = [
    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
    ];

//创建SVG
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

    svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return d[0];
    })
    .attr("cy", function(d) {
        return d[1];
    })
    .attr("r", 5);

2. 点的大小

控制半径，我们可以根据Y坐标的数据来绘制上面大下面小的圆。

.attr("r", function(d) {
    return Math.sqrt(h - d[1]);
});

3. 点的文本

注意文本的位置与圆中心的位置

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d[0] + "," + d[1];
    })
    .attr("x", function(d) {
        return d[0];
    })
    .attr("y", function(d) {
        return d[1];
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "red");

4. 源码

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <title>testD3-9-drawScatterPlot.html</title>
        <script type="text/javascript" src="d3.js"></script>
    <style type="text/css">
        </style>
    </head>
    <body>
        <script type="text/javascript">
            //高宽
            var w = 500;
            var h = 100;

            var dataset = [
                            [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                            [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
                          ];

            //创建SVG
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return d[0];
               })
               .attr("cy", function(d) {
                    return d[1];
               })
               .attr("r", function(d) {
                    return Math.sqrt(h - d[1]);
               });

            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    return d[0] + "," + d[1];
               })
               .attr("x", function(d) {
                    return d[0];
               })
               .attr("y", function(d) {
                    return d[1];
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
               .attr("fill", "red");
        </script>

    </body>
</html>