用D3.js(React) 画一个纵向条形图

我们接着上篇博文

 

保持render方法不变，修改componentDIdMount

  componentDidMount () {
    const width = 300, height = 300;    // 画布的宽高
    const dataset = [ 34, 23, 54, 73, 88, 4 ];
    const rectWidth = width / dataset.length;

    let svg = d3.select('.App')         // 选择文档中第一个class为App的元素
        .append('svg')                  // 添加一个svg元素
        .attr('width', width)
        .attr('height', height);
    
    // y轴比例尺
    let yScale = d3.scaleLinear()
        .range([height, 0])
        .domain([0, d3.max(dataset)]);

    svg.selectAll('rect')
        .data(dataset)
        .enter()
        .append('rect')
        .attr('x', (d, i) => rectWidth * i)
        .attr('y', d => yScale(d))
        .attr('width', rectWidth / 2)
        .attr('height', d => {
          return height - yScale(d);
        });

  }

---

数据都不变，只是原先是x轴为数据轴，现在改为y轴为数据轴。

---

这里与上篇博文的区别主要是添加了y轴比例尺

我们来看下y轴比例尺部分的代码

先来看下官方给出的栗子?

意思就是说，把真实数据10～130，投射到0～960的比例尺上。

我画了个图，方便理解?

相当于就是：在比例尺上的数值 = (真实数据 - 10) * 8

放大8倍

利用上面代码可以给出计算在比例尺上数值的方法

scaleLinear不仅可以用于数值，还可以用于颜色

官方又给出了栗子?

其实也是同理

上面两颗栗子?的简写方法如下?

d3.scaleLinear([[domain, ]range])  返回的是个投射到比例尺的方法

官方解释请见：scaleLinear && continuous-scales