d3.js 入門學習筆記( 八) 實現面積圖(線圖) 散點圖氣泡圖條形圖

WanFengZ發表於2019-11-24

線圖面積圖

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 2;
        }
        .grid-line{
            stroke: black;
            shape-rendering: crispEdges;
            stroke-opacity: .2;
        }
        .area {
            stroke: none;
            fill: steelblue;
            fill-opacity: .2;
        }
        .dot {
            fill: #fff;
            stroke: steelblue;
        }
    </style>
</head>
<body>
<script src="../d3.js"></script>
<script>
    function areaChart() {
        const _chart = {}

        let _width = 600,
            _height = 300,
            _margins = {
                top: 30,
                right: 30,
                bottom: 30,
                left: 30
            },
            _colors = d3.scaleOrdinal(d3.schemeCategory10),
            _data = []

        let _x,
            _y,
            _svg,
            _body

        _chart.width = function (width) {
            if (!arguments.length) return _width
            _width = width
            return _chart
        }

        _chart.height = function (height) {
            if (!arguments.length) return _height
            _height = height
            return _chart
        }

        _chart.margins = function (margins) {
              if (!arguments.length) return _margins
              _margins = margins
              return _chart
        }

        _chart.colors = function (colorScale) {
            if (!arguments.length) return _colors
            _colors = colorScale
            return _chart
        }

        _chart.x = function (xScale) {
            if (!arguments.length) return _x
            _x = xScale
            return _chart
        }

        _chart.y = function (yScale) {
          if (!arguments.length) return _y
          _y = yScale
          return _chart
        }

        _chart.addSeries = function (series) {
            _data.push(series)
            return _chart
        }

        _chart.render = function () {
            if (!_svg) {
                _svg = d3.select('body')
                    .append('svg')
                    .attr('width', _width)
                    .attr('height', _height)
                renderAxes()
            }
            renderBody()
        }

        function renderAxes() {
            const axes = _svg.append('g')
                .classed('axes', true)

            axes.append('g')
                .classed('x-axis', true)
                .attr('transform', `translate(${_margins.left}, ${_height - _margins.bottom})`)
                .call(d3.axisBottom().scale(_x.range([0, _width - _margins.left - _margins.right])))

            axes.selectAll('g.x-axis g.tick')
                .append('line')
                    .classed('grid-line', true)
                    .attr('x1', 0)
                    .attr('y1', 0)
                    .attr('x2', 0)
                    .attr('y2', -(_height - _margins.top - _margins.bottom))

            axes.append('g')
                .classed('y-axis', true)
                .attr('transform', `translate(${_margins.left}, ${_margins.top})`)
                .call(d3.axisLeft().scale(_y.range([_height - _margins.top - _margins.bottom, 0])))

            axes.selectAll('g.y-axis g.tick')
                .append('line')
                    .classed('grid-line', true)
                    .attr('x1', 0)
                    .attr('y1', 0)
                    .attr('x2', _width - _margins.left - _margins.right)
                    .attr('y2', 0)
        }

        function renderBody() {
            if (!_body) {
              _body = _svg.append('g')
                .classed('body', true)
                .attr('transform', `translate(${_margins.left}, ${_margins.top})`)
            }
            renderLines()
            renderAreas()
            renderDots()
        }

        function renderLines() {
            const line = d3.line()
                .x((d) => _x(d.x))
                .y((d) => _y(d.y))

            const pathLines = _body.selectAll('path.line')
                .data(data)

            pathLines.enter()
                .append('path')
                .merge(pathLines)
                    .classed('line', true)
                    .style('stroke', (d, i) => _colors(i))
                .transition()
                    .attr('d', d => line(d))
        }

        function renderAreas() {
            const area = d3.area()
                .x(d => _x(d.x))
                .y0(_y(0))
                .y1(d => _y(d.y))

            const pathAreas = _body.selectAll('path.area')
                .data(data)

            pathAreas.enter()
                .append('path')
                .merge(pathAreas)
                    .classed('area', true)
                    .style('fill', (d, i) => _colors(i))
                .transition()
                    .attr('d', d => area(d))

        }

        function renderDots() {
            _data.forEach((data, index) => {
                const circles =_body.selectAll(`circle._${index}`)
                    .data(data)

                circles.enter()
                    .append('circle')
                    .merge(circles)
                        .attr('class', `dot _${index}`)
                        .style('stroke', () => _colors(index))
                    .transition()
                        .attr('cx', d => _x(d.x))
                        .attr('cy', d => _y(d.y))
                        .attr('r', 4.5)
            })
        }

        return _chart
    }

    const numberOfSeries = 2,
          numberOfDataPoint = 11
          data = []

    for (let i = 0; i < numberOfSeries; i++) {
        data.push(d3.range(numberOfDataPoint).map((i) => ({x: i, y: Math.random() * 10})))
    }

    const chart = areaChart()
        .x(d3.scaleLinear().domain([0, 10]))
        .y(d3.scaleLinear().domain([0, 10]))

    data.forEach(series => {
        chart.addSeries(series)
    })

    chart.render()

    function update() {
        for (let i = 0; i < data.length; i++) {
            let series = data[i]
            series.length = 0
            for (let i = 0; i < numberOfDataPoint; i++) {
                series.push({x: i, y: Math.random() * 10})
            }
        }
        chart.render()
    }
</script>
<button onclick="update()">update</button>
</body>
</html>
複製程式碼

效果如下：

我們用工廠模式，areaChart 返回一個 chart物件，我們可以向其設定渲染資料和一些可以自定義的屬性項，渲染的邏輯放在 render() 函式中。

if (!_svg) {
    _svg = d3.select('body')
        .append('svg')
        .attr('width', _width)
        .attr('height', _height)
    renderAxes()
}
renderBody()
複製程式碼

座標軸只會在svg初始化的時候渲染一次。注意我們這裡是將座標軸和圖表內容主題分開的。

renderAxes() 裡面就是熟悉的渲染座標軸和柵格線的邏輯。

然後在初始化 body 時，位移到邊距的位置，這樣可以消除掉邊距的影響，因為 body 內的座標都是以 body 左上角為原點的。

接著，我們分別在renderLine() renderArea() renderDots() 內完成線條、面積、資料點的渲染。都是之前我們熟悉的程式碼。

散點圖

散點圖的工廠函式和上面類似，只實現了必須的功能，其餘的設定函式可以自行新增。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .grid-line{
            stroke: black;
            shape-rendering: crispEdges;
            stroke-opacity: .2;
        }
    </style>
</head>
<body>
<script src="../d3.js"></script>
<script>
    function scatterPlotChart() {
        const _chart = {}

        let _width = 500,
            _height = 500,
            _margins = {top: 30, right: 30, bottom: 30, left: 30},
            _colors = d3.scaleOrdinal(d3.schemeCategory10),
            _x,
            _y,
            _data = [],
            _svg,
            _body,
            _symbolTypes = d3.scaleOrdinal()
                .range(d3.symbols)


        _chart.render = function () {
            if (!_svg) {
                _svg = d3.select('body')
                    .append('svg')
                        .attr('width', _width)
                        .attr('height', _height)
                renderAxes()
            }
            renderBody()
        }

        function renderAxes() {
            const axes = _svg.append('g')
                .classed('axes', true)

            axes.append('g')
                .classed('x-axis', true)
                .attr('transform', `translate(${_margins.left}, ${_height - _margins.bottom})`)
                .call(d3.axisBottom().scale(_x.range([0, _width - _margins.left - _margins.right])))

            axes.selectAll('g.x-axis g.tick')
                .append('line')
                .classed('grid-line', true)
                .attr('x1', 0)
                .attr('y1', 0)
                .attr('x2', 0)
                .attr('y2', -(_height - _margins.top - _margins.bottom))

            axes.append('g')
                .classed('y-axis', true)
                .attr('transform', `translate(${_margins.left}, ${_margins.top})`)
                .call(d3.axisLeft().scale(_y.range([_height - _margins.top - _margins.bottom, 0])))

            axes.selectAll('g.y-axis g.tick')
                .append('line')
                    .classed('grid-line', true)
                    .attr('x1', 0)
                    .attr('y1', 0)
                    .attr('x2', _width - _margins.left - _margins.right)
                    .attr('y2', 0)
        }

        function renderBody() {
            if (!_body) {
                _body = _svg.append('g')
                    .classed('body', true)
                    .attr('transform', `translate(${_margins.left}, ${_margins.right})`)
            }
            renderSymbols()
        }

        function renderSymbols() {
            _data.forEach((data, i) => {
                const symbols = _body.selectAll('path._' + i)
                    .data(data)

                symbols.enter()
                    .append('path')
                    .merge(symbols)
                        .attr('class', 'symbol _' + i)
                        .style('fill', d => _colors(i))
                    .transition()
                        .attr('transform', d => `translate(${_x(d.x)}, ${_y(d.y)})`)
                        .attr('d', d3.symbol().type(_symbolTypes(i)))
            })
        }


        _chart.addSeries = function (series) {
            _data.push(series)
            return _chart
        }

        _chart.x = function (x) {
            if (!arguments.length) return _x
            _x = x
            return _chart
        }

        _chart.y = function (y) {
            if (!arguments.length) return _y
            _y = y
            return _chart
        }

        return _chart
    }

    const numberOfSeries = 5,
          numberOfDataPoint = 11,
          data = []

    for (let i = 0; i < numberOfSeries; i++) {
        data.push(d3.range(numberOfDataPoint).map(i => ({x: Math.random() * 10, y: Math.random() * 10})))
    }

    const chart = scatterPlotChart()
        .x(d3.scaleLinear().domain([0, 10]))
        .y(d3.scaleLinear().domain([0, 10]))

    data.forEach(series => {
        chart.addSeries(series)
    })

    chart.render()
</script>
</body>
</html>
複製程式碼

效果如下：

主要程式碼如下：

const _symbolTypes = d3.scaleOrdinal()
        .range(d3.symbols)

function renderSymbols() {
    _data.forEach((data, i) => {
        const symbols = _body.selectAll('path._' + i)
            .data(data)

        symbols.enter()
            .append('path')
            .merge(symbols)
                .attr('class', 'symbol _' + i)
                .style('fill', d => _colors(i))
            .transition()
                .attr('transform', d => `translate(${_x(d.x)}, ${_y(d.y)})`)
                .attr('d', d3.symbol().type(_symbolTypes(i)))
    })
}
複製程式碼

我們先建立了個有序尺度，它對應著不同的符號形狀，d3.symbols 是 d3 內建符號形狀的陣列。

在 renderSymbol() 函式中我們為每個資料項都建立 path 並呼叫 symbol 生成器為屬性 d 賦值。symbol.type(_symbolTypes(i))來設定 symbol 的型別為索引所對應著的尺度中的型別。

氣泡圖

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .grid-line{
            stroke: black;
            shape-rendering: crispEdges;
            stroke-opacity: .2;
        }
    </style>
</head>
<body>
<script src="../d3.js"></script>
<script>
  function scatterPlotChart() {
    const _chart = {}

    let _width = 500,
      _height = 500,
      _margins = {top: 30, right: 30, bottom: 30, left: 30},
      _colors = d3.scaleOrdinal(d3.schemeCategory10),
      _x,
      _y,
      _r,
      _data = [],
      _svg,
      _body


    _chart.render = function () {
      if (!_svg) {
        _svg = d3.select('body')
          .append('svg')
          .attr('width', _width)
          .attr('height', _height)
        renderAxes()
      }
      renderBody()
    }

    function renderAxes() {
      const axes = _svg.append('g')
        .classed('axes', true)

      axes.append('g')
        .classed('x-axis', true)
        .attr('transform', `translate(${_margins.left}, ${_height - _margins.bottom})`)
        .call(d3.axisBottom().scale(_x.range([0, _width - _margins.left - _margins.right])))

      axes.selectAll('g.x-axis g.tick')
        .append('line')
          .classed('grid-line', true)
          .attr('x1', 0)
          .attr('y1', 0)
          .attr('x2', 0)
          .attr('y2', -(_height - _margins.top - _margins.bottom))

      axes.append('g')
        .classed('y-axis', true)
        .attr('transform', `translate(${_margins.left}, ${_margins.top})`)
        .call(d3.axisLeft().scale(_y.range([_height - _margins.top - _margins.bottom, 0])))

      axes.selectAll('g.y-axis g.tick')
        .append('line')
          .classed('grid-line', true)
          .attr('x1', 0)
          .attr('y1', 0)
          .attr('x2', _width - _margins.left - _margins.right)
          .attr('y2', 0)
    }

    function renderBody() {
      if (!_body) {
        renderBodyClip()
        _body = _svg.append('g')
          .classed('body', true)
          .attr('transform', `translate(${_margins.left}, ${_margins.right})`)
          .attr('clip-path', 'url(#body-clip)')
      }
      renderBubbles()
    }

    function renderBodyClip() {
      _svg.append('defs')
        .append('clipPath')
          .attr('id', 'body-clip')
        .append('rect')
          .attr('x', 0)
          .attr('y', 0)
          .attr('width', _width - _margins.left - _margins.right)
          .attr('height', _height - _margins.top - _margins.bottom)
    }

    function renderBubbles() {
      _r.range([0, 20])

      _data.forEach((data, i) => {
        const bubbles = _body.selectAll('circle._' + i)
          .data(data)

        bubbles.enter()
          .append('circle')
          .merge(bubbles)
            .attr('class', 'circle _' + i)
            .style('stroke', _colors(i))
            .style('fill', _colors(i))
          .transition()
            .attr('cx', d => _x(d.x))
            .attr('cy', d => _x(d.y))
            .attr('r', d => _r(d.r))
      })
    }

    _chart.addSeries = function (series) {
      _data.push(series)
      return _chart
    }

    _chart.x = function (x) {
      if (!arguments.length) return _x
      _x = x
      return _chart
    }

    _chart.y = function (y) {
      if (!arguments.length) return _y
      _y = y
      return _chart
    }

    _chart.r = function (r) {
      if (!arguments.length) return _r
      _r = r
      return _chart
    }

    return _chart
  }


    const numberOfSeries = 5,
        numberOfDataPoint = 11,
        data = []

    for (let i = 0; i < numberOfSeries; i++) {
        data.push(d3.range(numberOfDataPoint).map(i => ({x: Math.random() * 10, y: Math.random() * 10, r: Math.random() * 10})))
    }

    const chart = scatterPlotChart()
        .x(d3.scaleLinear().domain([0, 10]))
        .y(d3.scaleLinear().domain([0, 10]))
        .r(d3.scalePow().exponent(2).domain([0, 10]))

    data.forEach(series => {
        chart.addSeries(series)
    })

    chart.render()
</script>
</body>
</html>
複製程式碼

效果如下：

氣泡圖的渲染和之前相比也只是多了個 r 屬性的賦值，另外，我們還給 body 新增了個裁剪區域，用來限制圖形越出 body，如下：

_svg.append('defs')
    .append('clipPath')
      .attr('id', 'body-clip')
    .append('rect')
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', _width - _margins.left - _margins.right)
      .attr('height', _height - _margins.top - _margins.bottom)
          
_body = _svg.append('g')
    .classed('body', true)
    .attr('transform', `translate(${_margins.left}, ${_margins.right})`)
    .attr('clip-path', 'url(#body-clip)')
複製程式碼

條形圖

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .grid-line{
            stroke: black;
            shape-rendering: crispEdges;
            stroke-opacity: .2;
        }
        .bar {
            fill: #4682b4;
        }
    </style>
</head>
<body>
<script src="../d3.js"></script>
<script>
  function scatterPlotChart() {
    const _chart = {}

    let _width = 500,
      _height = 500,
      _margins = {top: 30, right: 30, bottom: 30, left: 30},
      _x,
      _y,
      _data = [],
      _svg,
      _body


    _chart.render = function () {
      if (!_svg) {
        _svg = d3.select('body')
          .append('svg')
          .attr('width', _width)
          .attr('height', _height)
        renderAxes()
      }
      renderBody()
    }

    function renderAxes() {
      const axes = _svg.append('g')
        .classed('axes', true)

      axes.append('g')
        .classed('x-axis', true)
        .attr('transform', `translate(${_margins.left}, ${_height - _margins.bottom})`)
        .call(d3.axisBottom().scale(_x.range([0, _width - _margins.left - _margins.right])))

      axes.selectAll('g.x-axis g.tick')
        .append('line')
        .classed('grid-line', true)
        .attr('x1', 0)
        .attr('y1', 0)
        .attr('x2', 0)
        .attr('y2', -(_height - _margins.top - _margins.bottom))

      axes.append('g')
        .classed('y-axis', true)
        .attr('transform', `translate(${_margins.left}, ${_margins.top})`)
        .call(d3.axisLeft().scale(_y.range([_height - _margins.top - _margins.bottom, 0])))

      axes.selectAll('g.y-axis g.tick')
        .append('line')
        .classed('grid-line', true)
        .attr('x1', 0)
        .attr('y1', 0)
        .attr('x2', _width - _margins.left - _margins.right)
        .attr('y2', 0)
    }

    function renderBody() {
      if (!_body) {
        _body = _svg.append('g')
          .classed('body', true)
          .attr('transform', `translate(${_margins.left}, ${_margins.right})`)
          .attr('clip-path', 'url(#body-clip)')
        renderBodyClip()
      }
      renderBubbles()
    }

    function renderBodyClip() {
      _svg.append('defs')
        .append('clipPath')
        .attr('id', 'body-clip')
        .append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', _width - _margins.left - _margins.right)
        .attr('height', _height - _margins.top - _margins.bottom)
    }

    function renderBubbles() {
        const padding = 2

        const bars = _body.selectAll('rect.bar').data(_data)

        bars.enter()
          .append('rect')
          .merge(bars)
          .classed('bar', true)
          .transition()
          .attr('x', d => _x(d.x))
          .attr('y', d => _y(d.y))
          .attr('height', d => _height - _margins.top - _margins.bottom - _y(d.y))
          .attr('width', d => Math.floor((_width - _margins.left - _margins.right) / _data.length) - padding)
    }


    _chart.addSeries = function (series) {
      _data = series
      return _chart
    }

    _chart.x = function (x) {
      if (!arguments.length) return _x
      _x = x
      return _chart
    }

    _chart.y = function (y) {
      if (!arguments.length) return _y
      _y = y
      return _chart
    }

    return _chart
  }


  const numberOfSeries = 5,
    numberOfDataPoint = 10,
    data = []

  for (let i = 0; i < numberOfSeries; i++) {
    data.push(d3.range(numberOfDataPoint).map(i => ({x: i, y: Math.random() * 10})))
  }

  const chart = scatterPlotChart()
    .x(d3.scaleLinear().domain([0, 10]))
    .y(d3.scaleLinear().domain([0, 10]))

  data.forEach(series => {
    chart.addSeries(series)
  })

  chart.render()
</script>
</body>
</html>
複製程式碼

效果如下：

d3.js 入門學習記錄(九) 用佈局實現餅圖堆疊面積圖矩陣樹圖思維樹圖封閉圖
2019-11-29
JS矩陣
ECharts 實現地圖散點圖（上）
2017-03-20
Echarts地圖
d3.js 入門學習記錄(十) 力圖
2019-12-08
JS
python畫散點圖和折線圖
2017-08-31
Python
[GAMES101]圖形學入門筆記
2024-06-07
GAM筆記
實驗| Pyecharts實現散點圖
2020-09-24
Echarts
Excel 散點圖和折線圖的區別
2013-05-29
Excel
柱狀圖、直方圖、散點圖、餅圖講解
2020-12-30
直方圖
Java新手入門學習路線圖
2020-11-20
Java
氣泡圖繪製軟體那個專業，怎麼畫氣泡圖
2019-09-25
神奇的氣泡圖形，傳遞資訊的使者
2013-02-28
學習筆記之JAVA圖形設計卷I AWT——第3章圖形 (轉)
2007-11-12
筆記Java
Linux學習路線圖（從入門到上崗，帶自學路線圖）
2020-05-28
Linux
【知識點】圖與圖論入門
2024-06-17
圖論
遊戲開發新手入門之點陣圖化圖形(轉)
2007-08-12
遊戲開發
圖形學學習筆記二：觀測變換
2020-12-22
筆記
在Excel中新建氣泡圖
2024-05-28
Excel
Echarts資料視覺化：圖表篇（2）—— 折線圖、堆疊面積折線圖
2019-04-28
Echarts視覺化
SPSS統計作圖教程：百分條圖/堆積條圖
2020-12-02
SPSS
【matplotlib 實戰】--面積圖
2023-09-30
iOS 微信聊天訊息的圖片氣泡實現
2016-11-02
iOS
第四篇：R語言資料視覺化之折線圖、堆積圖、堆積面積圖
2016-04-13
R語言視覺化
【JavaScript學習筆記】畫圖
2017-09-02
JavaScript筆記
d3.js 入門學習記錄(十一) 地圖上的視覺化
2019-12-08
JS地圖視覺化
學習筆記----圖論學習中
2014-01-10
筆記圖論
Linux學習路線圖，入門教程分享
2020-05-21
Linux
Linux學習路線圖，入門教程分享。
2020-05-21
Linux
seaborn學習筆記（四）：箱型圖、小提琴圖
2022-02-23
筆記
python-資料分析-Matplotlib-1-基礎圖形（曲線圖-散點-柱狀-堆疊柱狀-餅狀圖-直方圖）
2024-06-12
Python直方圖
Python視覺化-氣泡圖
2018-04-24
Python視覺化
R繪圖(3): 散點圖新增文字註釋
2021-03-08
繪圖
jmeter學習指南之結果分析-圖形圖表
2019-08-20
JMeter
Flutter 入門路線圖
2020-01-16
Flutter
圖形學3D渲染管線學習
2021-12-09
3D
R繪圖(7): 把散點圖的點換成扇形
2021-07-22
繪圖
Python視覺化-散點圖與彩色散點圖
2018-04-24
Python視覺化
python資料視覺化-matplotlib入門(4)-條形圖和直方圖
2022-04-27
Python視覺化直方圖
GAMES101系列筆記一圖形學概述與線性代數入門
2020-11-11
GAM筆記

d3.js 入門學習筆記( 八) 實現 面積圖(線圖) 散點圖 氣泡圖 條形圖

線圖 面積圖

散點圖

氣泡圖

條形圖

相關文章

d3.js 入門學習筆記( 八) 實現面積圖(線圖) 散點圖氣泡圖條形圖

線圖面積圖