用d3js创建一个简单的矩形图

2018-12-04 本文已影响84人 AC手环

用d3js创建一个简单的矩形

前言

本文并不是针对初学者的教程，而是对矩形图绘制的基本流程做一个总结，整理一下d3的基本工作流程.

demo地址

正文

用d3创建矩形图一般分为下面几个步骤

flow.png

bar_chart_1.png

[图片上传失败...(image-61825a-1543910014177)]

通过这几个步骤就可以创建出一个完整的矩形图，接下来我们从具体代码，一步步看看要如何

生成数据源

为了显示方便，我们先生成一些测试数据，我们先定义数据格式为26个字母以及他们的值, 比如{'key': 'A', 'value': 65}

var i = 0;
sampleData = new Array(26).fill(undefined).map(function(){
  i += 1;
  return {
    key: String.fromCharCode(64+i),
    value: Math.random()*80+10
  }
})

这里我用了一个比较高级的写法创建了一个数组，数组中包含了我们想要的格式。这个函数我就不过多的解释了，主要用了map这个高阶函数。

准备svg和布局参数

这个是一个简单的html文件，包含了一个svg

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="./node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
    <title></title>
  </head>
  <body>
    <svg id="bar-chart" width="860" height="500">

    </svg>
  </body>
</html>
<script src="./main.js" charset="utf-8"></script>

然后我们定义这个真正的chart显示的区域，它与上下左右一般需要有一定的边距，预留一些空间，为了美观和兼容。然后计算出我们图表的长和宽在后面使用。

var margin = {
  top: 20,
  left: 40,
  bottom: 20,
  right: 0
}

var barChart = d3.select('#bar-chart')

var width = barChart.attr('width') - margin.left - margin.right;
var height = barChart.attr('height') - margin.top - margin.bottom;

bar_layout.png

生成比例尺

我们需要两个比例尺，一个将key映射到水平范围，一个将value映射到高度范围

xScale将key映射到水平范围， key是离散值，所以我们选用scaleBand(序数比例尺),它将离散值映射到连续值，所以domain对应的是每一个key, 他的range是我们的宽度范围. 这里我们顺便设置了每个矩形之间的padding参数，这样比例尺能够自动帮我们计算每个矩形所占的实际宽度，我们后面可以用bandwidth去获取这个宽度。

yScale 将key 映射到垂直范围，这是一个连续范围，所以我们选用scaleLinear(线性比例尺),输入域(domain)是0到数据源的最大值，这样value就只会在高度范围内显示

高度的输出域比较特殊，因为在svg中，左上角才是原点，所以value越大的其y值应该越小。所以range是从height到0，而不是从0到height.

var xScale = d3.scaleBand()
           .domain(_data.map(function(d){
             return d.key
           }))
           .range([0, width])
           .padding(0.5)


// 生成y轴比例尺
var maxValue = d3.max(_data, function(d){  // 获取数据源最大值
  return d.value
});

yScale = d3.scaleLinear()
               .domain([0, maxValue])
               .range([height, 0])

生成坐标系

因为d3直接提供了方便的坐标系绘制函数，我们可以通过提供比例尺来创建一个坐标系

// 根据x轴比例尺生成x轴坐标系
var xAxis = d3.axisBottom(xScale);
// 根据y轴比例尺生成y轴坐标系
var yAxis = d3.axisLeft(yScale);

当然坐标系还有一些参数使可以调整的，我们暂时先不管。

绘制坐标系

绘制坐标系时我们只需要对添加的svgElement对象调用坐标系函数call(axis)即可，同时我们对坐标轴的位置进行设置。添加class 是为了将来自定义坐标轴方便。

// 绘制坐标轴
barChart.append('g')
        .attr('class', 'x-axis')
        .attr('transform', 'translate('+margin.left+','+(margin.top + height)+')')
        .call(xAxis)

barChart.append('g')
        .attr('class', 'y-axis')
        .attr('transform', 'translate('+ margin.left+','+margin.top+')')
        .call(yAxis);

现在我们已经能看到一个雏形了, 继续绘制我们的矩形吧

bar_chart_2.png

绘制矩形

矩形的参数要考虑参数的比较多，我们用导图来方便记忆，下面也只是我当前用到的基本参数

rect.png

// 绘制矩形
barChart.append('g')
        .attr('class', 'bars')
        .selectAll('rect')
        .data(_data)
        .enter()
        .append('rect')
        .attr('width', xScale.bandwidth())
        .attr('x', function(d){
            return xScale(d.key)
        })
        .attr('y', function(d){
          return yScale(d.value);
        })
        .attr('height', function(d){
          return height - yScale(d.value);
        })
        .attr('transform', 'translate('+margin.left+','+margin.top+')')
        .attr('fill', 'steelblue')

总结

把整个流程整理下来，会发现其实d3创建矩形图的整个过程十分的清晰明了，不用觉得d3有多么困难。