使用PyQtGraph 自定義繪圖

ython 的主要優(yōu)勢之一是探索性數(shù)據(jù)科學和可視化生態(tài)體系。一般的工具鏈為Pandas、numpy、sklearn 進行數(shù)據(jù)分析和使用matplotlib進行繪圖。

但是如果需要自己自定義一個個性化的圖形界面工具，則可能不是很合適。為了實現(xiàn)這種需求，可以使用PyQt構(gòu)建GUI應用程序，但是可以使用上面的生態(tài)系工具構(gòu)建自定義的復雜的數(shù)據(jù)驅(qū)動應用程序和交互式儀表板。

對于簡單且高度交互的繪圖，本文介紹一個Python GUI的繪圖PyQtGraph。

概述

PyQtGraph建立在Qt QGraphicsScene的原生庫，可提供更好更高性能繪圖能力，特別是對于實時數(shù)據(jù)，可以提供交互性和使用Qt圖形小部件輕松自定義繪圖的能力。

PyQtGraphzh主要特點有：

各種線圖和散點圖；

數(shù)據(jù)平移/縮放鼠標；

實時數(shù)據(jù)更新和顯示，交互數(shù)據(jù)的快速繪制；

圖像顯示與互動的查找表和水平控制；

支持完全的類型（常見類型和Qt類型，比如RGB，RGBA，或亮度，QColor）

2D交互視圖繪制；

交互式視窗旋轉(zhuǎn)/縮放鼠標；

視頻流的顯示和實時交互；

網(wǎng)格的等值面渲染；

三維圖形系統(tǒng)；

三維表面圖和散點圖；

實驗數(shù)據(jù)切片的多維圖像任意角度的函數(shù)（比如，對MRI數(shù)據(jù)處理）；

更容易編程的基本的3D場景圖；

對感興趣的控制區(qū)選擇和數(shù)據(jù)顯示；

交互標記垂直/水平的地塊的位置和區(qū)域；

從圖像中選擇任意區(qū)域的部件和自動切片數(shù)據(jù)匹配；

安裝

為了使用PyQtGraph做圖，必須先安裝該模塊。PyQtGraph依賴Pyhon 3.7和PyQt，所以需要先安裝這些庫。

在Pyhon 3.7環(huán)境下，可以用：

pip install qt
pip install pyqt

然后

pip install pyqtgraph

為了方便可以使用anaconda環(huán)境，這樣只需安裝

conda install qt
conda install pyqt

然后

conda install pyqtgraph

PyQtGraph小部件

在PyQtGraph中，所有圖都是使用PlotWidget小部件。小部件提供了canvas，可以在其上添加和配置任何類型的繪圖。在hood下，繪圖小部件使用本機Qt QGraphicsScene。例如，我們創(chuàng)建一個PlotWidget至于任何其他小部件的例子：

from PyQt6 import QtWidgets
from pyqtgraph import PlotWidget, plot
import pyqtgraph as pg
import sys
import os
class MainWindow(QtWidgets.QMainWindow):
def __init__(self, *args, **kwargs):
super(MainWindow, self).__init__(*args, **kwargs)
self.graphWidget=pg.PlotWidget()
self.setCentralWidget(self.graphWidget)
x=[1, 2, 3, 4, 5, 6, 7, 8]
y=[3567.44,3462.95,3309.75,3167.13,3508.70,3284.83,3313.58,3268.02]
self.graphWidget.plot(x, y)
def main():
app=QtWidgets.QApplication(sys.argv)
main=MainWindow()
main.show()
sys.exit(app.exec())
if __name__=='__main__':
main()

PyQtGraph 的默認繪圖樣式非常簡單——黑色背景和細（幾乎不可見）白線。在下一節(jié)中，我們將看看 PyQtGraph 中有哪些可用選項來改善繪圖的外觀和可用性。

造型圖

PyQtGraph繼承了Qt的QGraphicsScene渲染圖表，可以實現(xiàn)使用所有標準Qt線條和形狀樣式選項。PyQtGraph提供了一個API用于使用這些來繪制繪圖和管理繪圖畫布。

下面我們將介紹創(chuàng)建和自定義繪圖所需的最常見的樣式功能。

背景色

可以通過調(diào)用.setBackground來改變背景顏色。PlotWidget實例（在 self.graphWidget）。下面的代碼將通過傳入字符串“w”將背景設置為白色。

self.graphWidget.setBackground('w')

可以隨時設置（和更新）繪圖的背景顏色。

from PyQt5 import QtWidgets
from pyqtgraph import PlotWidget, plot
import pyqtgraph as pg
import sys
import os
class MainWindow(QtWidgets.QMainWindow):
def __init__(self, *args, **kwargs):
super(MainWindow, self).__init__(*args, **kwargs)
self.graphWidget=pg.PlotWidget()
self.setCentralWidget(self.graphWidget)
x=[1, 2, 3, 4, 5, 6, 7, 8]
y=[3567.44,3462.95,3309.75,3167.13,3508.70,3284.83,3313.58,3268.02]
self.graphWidget.setTitle("Chongchong", color="b", size="30pt")
self.graphWidget.plot(x, y)
def main():
app=QtWidgets.QApplication(sys.argv)
main=MainWindow()
main.show()
sys.exit(app.exec())
if __name__=='__main__':
main()

有許多使用單個字母的簡單顏色表示，這是基于matplotlib. 主意這種表示中表示黑色的是“k”。

除了這些單字母代碼之外，還可以使用十六進制的RGB和RGBA 設置更復雜的顏色，

比如 #672922

self.graphWidget.setBackground('#bbccaa')

RGB和RGBA值可以分別作為3元組或4元組傳入，使用值 0-255。

self.graphWidget.setBackground((100,50,255)) # RGB each 0-255
self.graphWidget.setBackground((100,50,255,25))

最后，還可以使用Qt的顏色表示法QColor：

from PyQt5 import QtGui
self.graphWidget.setBackground(QtGui.QColor(100,50,254,25))

如果使用特定的QColor應用程序中其他位置的對象，或?qū)⒗L圖背景設置為默認的GUI背景顏色。

color=self.palette().color(QtGui.QPalette.Window)
self.graphWidget.setBackground(color)

線條顏色、寬度和樣式

PyQtGraph中的線條也是使用標準Qt繪制的 QPen類型，可以像在任何其他操作中一樣完全控制線條繪制QGraphicsScene繪畫。要使用筆繪制一條線，只需創(chuàng)建一個新的QPen實例并將其傳遞給 plot方法。

下面的代碼創(chuàng)建一個QPen對象，傳入一個3元組int指定 GB值（全紅色）的值。也可以通過傳遞 'r' 或 Qcolor。然后通過pen參數(shù)將其它傳入plot。

pen=pg.mkPen(color=(255, 0, 0))
self.graphWidget.plot(hour, temperature, pen=pen)

效果如下：

線條顏色

通過改變QPen可以改變線條的外觀，包括以像素為單位的線條寬度和使用標準Qt線條樣式的樣式（虛線、點線等）。比如創(chuàng)建一條15像素寬的紅色虛線，代碼為：

pen=pg.mkPen(color=(255, 0, 0), width=15, style=QtCore.Qt.DashLine)

結(jié)果如下：

標準Qt線條樣式都可以使用，包括Qt.SolidLine, Qt.DashLine, Qt.DotLine, Qt.DashDotLine和 Qt.DashDotDotLine，起對樣樣式官方圖如下

線標記

對于許多繪圖，在繪圖上添加標記或代替線條放置標記可能會有所幫助。要在繪圖上繪制標記，請在調(diào)用時傳遞符號以用作標記.plot。

self.graphWidget.plot(hour, temperature, symbol='+')

此外symbol你也可以傳入symbolSize,symbolBrush和 ymbolPen參數(shù)。傳遞的值作為 symbolBrush可以是任何顏色或QBrush樣式，symbolPen中可以中使用顏色參數(shù)或QPen實例。

畫筆

畫用于繪制形狀的輪廓，用于填充。

下面的代碼將在粗紅線上給出一個大小為30的藍色十字標記。

pen=pg.mkPen(color=(255, 0, 0), width=15, style=QtCore.Qt.DashLine)
self.graphWidget.plot(hour, temperature, pen=pen, symbol='+', symbolSize=30, symbolBrush=('b'))

也支持傳入任何 QPainterPath對象，然后完全自定義的標記形狀。

畫板標題

畫板標題對于為給定圖表上顯示的內(nèi)容提供上下文非常重要。在 PyQtGraph中，可以使用 PlotWidget對象的setTitle()方法，設定標題字符串。

self.graphWidget.setTitle("Chongchong")

可以通過傳遞其他參數(shù)將文本樣式（包括顏色、字體大小和粗細）應用于標題（以及 PyQtGraph中的任何其他標簽）。

比如設置標題藍色，字體大小為 30px。

self.graphWidget.setTitle("Chongchong", color="b", size="30pt")

也支持使用HTML標記語法來設置標題的樣式，比如：

self.graphWidget.setTitle("<span style=\"color:blue;font-size:30pt\">Chongchong</span>")

軸標識

與標題類似，可以使用setLabel()方法來創(chuàng)建我們的軸標識。這需要兩個參數(shù)， position和text。position參數(shù)可以設置'left,'right','top','bottom'的值，用來支指出放置文本的軸的位置。參數(shù)text是要顯示標題的文本。

可以將其他樣式參數(shù)傳遞給該方法。但與標題略有不同，必須是有效的CSS名稱-值對。例如，大小為font-size. 因為名字font-size有連字符，不能直接作為參數(shù)傳遞，必須使用 **dictionary方法。

styles={'color':'r', 'font-size':'20px'}
self.graphWidget.setLabel('left', '上證指數(shù)', **styles)
self.graphWidget.setLabel('bottom', '月', **styles)

也支持HTML樣式的語法，比如

self.graphWidget.setLabel('left', "<span style=\"color:red;font- size:20px\">上證指數(shù)</span>")
self.graphWidget.setLabel('bottom', "<span style=\"color:red;font-size:20px\">月</span>")

圖例

除了軸和繪圖標題之外，通常會要顯示一個圖例來標識給定線所代表的內(nèi)容。比如添加了多條線時，可以通過調(diào)用來為繪圖添加圖例。可以通過PlotWidget對象的.addLegent。但是需要在調(diào)用時為每一行提供一個名稱 .plot()。比如，以下代碼在繪制的線分配了一個名稱“2022年” .plot(). 此名稱將用于標識圖例中的行。

self.graphWidget.plot(x, y, name="2022年", pen=pen, symbol='+', symbolSize=30, symbolBrush=('b'))
self.graphWidget.addLegend()

圖例默認顯示在左上角。可以通過將2元組傳遞給offset創(chuàng)建圖例時的參數(shù)。

背景網(wǎng)格

添加背景網(wǎng)格可以讓繪圖更易于閱讀，尤其是在嘗試將相對x和y值相互比較時。可以通過調(diào)用PlotWidget的.showGrid為打開背景網(wǎng)格，可以獨立切換x和y網(wǎng)格。

self.graphWidget.showGrid(x=True, y=True)

設置軸限制

有時候會有限制繪圖上可見的數(shù)據(jù)范圍或?qū)⑤S鎖定在一致的范圍內(nèi)。在 PyQtGraph 中，這可以使用.setXRange()和.setYRange()方法來強制繪圖僅顯示軸上指定范圍內(nèi)的數(shù)據(jù)。

self.graphWidget.setXRange(2, 5, padding=0)
self.graphWidget.setYRange(3300, 3500, padding=0)

一個可選的填充參數(shù)導致范圍設置為大于指定的分數(shù)（默認情況下在0.02和0.1之間，取決于ViewBox的大小）。如果要完全刪除此填充，請傳遞0。

繪制多條線

一個圖中繪制多條線是很常見的。在PyQtGraph中，只需在PlotWidget中多次調(diào)用.plot()即可. 下面的例子，我繪制兩條相似的數(shù)據(jù)線，每條線使用相同的線型、粗細等，但改變線的顏色。為了方便，定義一個plot函數(shù)，接受x和y要繪制的參數(shù)、線的名稱（用于圖例）和顏色。將顏色用于線條和標記顏色。

def plot(self, x, y, plotname, color):
pen=pg.mkPen(color=color)
self.graphWidget.plot(x, y, name=plotname, pen=pen, symbol='+', symbolSize=30, symbolBrush=(color))
self.plot(x, y1, "2021", 'r')
self.plot(x, y, "2022", 'b')

其結(jié)果如下圖：

清除畫板

有事可能希望定期清除和刷新繪圖可以通過.clear()調(diào)用來實現(xiàn)。

self.graphWidget.clear()

將會從圖中刪除線條，但保持所有其他屬性相同。

更新畫板

雖然簡單地清除畫板并重新繪制所有元素，這樣一來Qt必須銷毀并重新創(chuàng)建 QGraphicsScene對象和所有元素。對于小型或簡單的繪圖，這沒什么問題，但對一個比較復雜耗時的圖，可能更好的方法是跟新局部數(shù)據(jù)，而不是從頭來一遍。PyQtGraph 獲取新數(shù)據(jù)并更新繪制的線，而不會影響畫板的其他部分。

要更新畫線，需要對線條對象的引用。首次使用創(chuàng)建行時返回此引用.plot可以簡單地將它存儲在一個變量中。請注意，這是對線不是對畫板的引用。

my_line_ref=graphWidget.plot(x, y)

有了引用變量，只需其.setData關(guān)更新數(shù)據(jù)。

from PyQt5 import QtWidgets, QtCore
from pyqtgraph import PlotWidget, plot
import pyqtgraph as pg
import sys
import os
from random import randint
class MainWindow(QtWidgets.QMainWindow):
def __init__(self, *args, **kwargs):
super(MainWindow, self).__init__(*args, **kwargs)
self.graphWidget=pg.PlotWidget()
self.setCentralWidget(self.graphWidget)
self.x=list(range(100))
self.y=[randint(0,100) for _ in range(100)]
self.graphWidget.setBackground('w')
pen=pg.mkPen(color=(255, 0, 0))
self.data_line=self.graphWidget.plot(self.x, self.y, pen=pen)
app=QtWidgets.QApplication(sys.argv)
w=MainWindow()
w.show()
sys.exit(app.exec())

每50毫秒更新一次數(shù)據(jù)，盡管 PyQtGraph 繪制數(shù)據(jù)的速度比這快得多，但很難觀察！為此，可以定義了一個Qt計時器，并將其設置為調(diào)用自定義方法update_plot_data更改數(shù)據(jù),這樣就會生成滾動的動態(tài)圖：

self.timer=QtCore.QTimer()
self.timer.setInterval(50)
self.timer.timeout.connect(self.update_plot_data)
self.timer.start()
def update_plot_data(self):
self.x=self.x[1:]
self.x.append(self.x[-1] + 1)
self.y=self.y[1:]
self.y.append( randint(0,100))
self.data_line.setData(self.x, self.y)

總結(jié)

本文我們介紹了，使用PyQtGraph繪制簡單的圖并自定義線條、標記和標簽。實際上PyQtGraph是一個強大的繪圖工具，作為一個入門介紹，想更深入一步的研究和使用可以參考PyQtGraph官方更詳細的文檔和實例程序。

天將和大家分享HTML5中canvas元素的使用，有一定參考價值，希望對大家有所幫助。

【推薦課程：HTML5教程】

canvas元素

主要使用 JavaScript 在網(wǎng)頁上繪制圖像畫布是一個矩形區(qū)域，可以控制其每一像素而且canvas 擁有多種繪制路徑、矩形、圓形、以及添加圖像的方法，接下來將在文章中為大家詳細介紹

html代碼

矩形

fillStyle：用來給圖形添加色彩的

fillRect(x,y,width,height)

x:距離左上角的x值

y:距離左上角的y值

width，height:就是圖形的寬高

var demo=document.getElementById("demo");

var fang=demo.getContext("2d");

fang.fillStyle="pink";

fang.fillRect(0,0,200,50);

</script>

線條

moveTo:線條開始位置

lineTo:結(jié)束位置

lineWidth:線條寬度

strokeStyle:顏色

stroke:開始繪制

var demo=document.getElementById("demo");

var xian=demo.getContext("2d");

xian.moveTo(10,10);

xian.lineTo(100,100);

xian.lineWidth=2;

xian.strokeStyle="pink";

xian.stroke();

圓形

beginPath():開始路徑

arc(x,y,r,sAngle,eAngle,counterclockwise)

x,y：為圓的中心點坐標

r：圓的半徑

sAngle,eAngle：圓的起始角和結(jié)束角

counterclockwise：可寫可不寫規(guī)定應該逆時針還是順時針繪圖。False=順時針，true=逆時針。

var demo=document.getElementById("demo");

var yuan=demo.getContext("2d");

yuan.beginPath();

yuan.arc(100,100,50,0,2*Math.PI);

yuan.strokeStyle="pink";

yuan.stroke();

圖形插入

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

sx,sy：剪切的 x，y 坐標位置

swidth,sheight：被剪切圖像的寬度和高度

x,y：在畫布上放置圖像的 x，y 坐標位置

width,height：要使用的圖像的寬度和高度

var demo=document.getElementById("demo");

var img1=document.getElementById("img1");

var img=demo.getContext("2d");

img1.onload=function(){

img.drawImage(img1,10,10,100,120)

總結(jié)：以上就是本篇文章的全部內(nèi)容了，希望通過本篇文章對大家有所幫助。

以上就是HTML5中canvas元素如何繪制圖形的詳細內(nèi)容，更多請關(guān)注其它相關(guān)文章！

更多技巧請《轉(zhuǎn)發(fā) + 關(guān)注》哦！

3.js入門教程2-在 d3.js中構(gòu)建形狀

文章目錄

d3.js入門教程2-在 d3.js中構(gòu)建形狀
形狀的添加

圓形的添加
矩形的添加
線段的添加
文本的添加
折線的添加
區(qū)域的添加
圓弧的添加

參考

d3.js是一個用于繪圖的JavaScript 庫。它可以可視化展示任何類型的數(shù)據(jù)。 d3.js允許繪制形狀，然后將各種形狀構(gòu)建一個圖形。本文檔描述了一些函數(shù)，可以更有效地從數(shù)據(jù)中繪制svg。

形狀的添加

圓形的添加

在svg中繪制圓形。需要三個參數(shù)：分別代表圓心x位置的cx、圓心y位置的cy和半徑的r。基礎調(diào)用函數(shù)如下：

<circle style="fill: #69b3a2" stroke="black" cx=100 cy=100 r=40></circle>

現(xiàn)在，讓我們用javascript來實現(xiàn)它，這基本上是相同的過程。

<!-- 直接繪圖 -->
    <svg>
        <circle style="fill: #69b3a2" stroke="black" cx=100 cy=100 r=40></circle>
    </svg>

    <!-- 加載d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一個空的svg圖片 -->
    <svg id="circle"></svg>
    <script>
        // 創(chuàng)建svg元素
        var svg=d3.select("#circle").append("svg").attr("width", 200).attr("height", 200)

        // 設置屬性
        // stroke設置輪廓顏色
        svg.append('circle').attr('cx', 100).attr('cy', 100).attr('r', 30).attr('stroke', 'black').attr('fill', 'red')
    </script>

其中藍色圓是由html繪圖元素創(chuàng)建，紅色圓是通過js創(chuàng)建

矩形的添加

在svg中繪制矩形，四個參數(shù)是必需的：x，y，width和height。

<rect style="fill: #69b3a2" stroke="black" x=10 y=100, width=300 height=40></rect>

現(xiàn)在，讓我們用javascript來實現(xiàn)它，這基本上是相同的過程。

<!-- 直接繪圖 -->
    <svg>
        <rect style="fill: #69b3a2" stroke="black" x=10 y=100, width=300 height=40></rect>
    </svg>

    <!-- 加載d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一個空的svg圖片 -->
    <svg id="rect"></svg>


    <script>
        // 創(chuàng)建svg元素
        var svg=d3.select("#rect").append("svg").attr("width", 800).attr("height", 200)

        // 設置屬性
        svg.append('rect')
            .attr('x', 10)
            .attr('y', 120)
            .attr('width', 600)
            .attr('height', 40)
            .attr('stroke', 'black')
            .attr('fill', 'red');

其中藍色矩形是由html繪圖元素創(chuàng)建，紅色矩形是通過js創(chuàng)建

線段的添加

在svg中繪制線段，四個參數(shù)是必需的：x0，y0，x1和y1（線段的兩個頂點坐標）。

<line stroke="#69b3a2" x0=10 y0=10, x1=500 y1=100></line>

現(xiàn)在，讓我們用javascript來實現(xiàn)它，這基本上是相同的過程。

<!-- 直接繪圖 -->
    <svg>
        <line stroke="#69b3a2" x0=10 y0=10, x1=300 y1=100></line>
    </svg>

    <!-- 加載d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一個空的svg圖片 -->
    <svg id="segment"></svg>

    <script>

        // 創(chuàng)建svg元素
        var svg=d3.select("#segment").append("svg").attr("width", 800).attr("height", 200)

        // 設置屬性
        svg.append('line')
            .attr('x1', 10)
            .attr('y1', 10)
            .attr('x2', 700)
            .attr('y2', 100)
            .attr('stroke', 'red')
    </script>

其中藍色線段是由html繪圖元素創(chuàng)建，紅色線段是通過js創(chuàng)建

文本的添加

在svg中添加文本，需要三個參數(shù)：x,y和text。

<text stroke="#69b3a2" style="font-size: 19px" x=100 y=50>I'm a piece of text</text>

現(xiàn)在，讓我們用javascript來實現(xiàn)它，這基本上是相同的過程。

<!-- 直接繪圖 -->
    <svg>
        <text stroke="#69b3a2" style="font-size: 19px" x=100 y=80>I'm a piece of text</text>
    </svg>

    <!-- 加載d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一個空的svg圖片 -->
    <svg id="text"></svg>

    <script>

        // 創(chuàng)建svg元素
        var svg=d3.select("#text").append("svg").attr("width", 800).attr("height", 200)

        //設置屬性
        svg.append('text')
            .attr('x', 60)
            .attr('y', 50)
            .attr('stroke', 'red')
            .style("font-size", 19)
            .text("I'm another piece of text")
    </script>

其中藍色文本是由html繪圖元素創(chuàng)建，紅色文本是通過js創(chuàng)建

折線的添加

在svg添加文本，參數(shù)比較復雜。具體如下：

<path style="fill: none" stroke="black" d="M0 20 L150 150 L300 100 L450 20 L600 130"></path>

幸運的是，d3.js提供可以更有效地繪制折線的函數(shù)

<!-- 直接繪圖 -->
    <svg height=200 width=600>
        <path style="fill: none" stroke="#69b3a2" d="M0 20 L150 150 L300 100 L450 20 L600 130"></path>
    </svg>

    <!-- 加載d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一個空的svg圖片 -->
    <svg id="line" height=200 width=600></svg>

    <script>

        // 創(chuàng)建svg元素
        var svg=d3.select("#line").append("svg")

        // 創(chuàng)建數(shù)據(jù)，多個點連接成折線
        var data=[{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]

        // 創(chuàng)建連接函數(shù)
        var lineFunc=d3.line()
            .x(function (d) { return d.x })
            .y(function (d) { return d.y })

        // 添加元素
        svg.append('path')
            .attr('d', lineFunc(data))
            .attr('stroke', 'red')
            .attr('fill', 'none');
    </script>

其中藍色線條是由html繪圖元素創(chuàng)建，紅色線條是通過js創(chuàng)建

當然可以設置線條類型，如下所示

<!-- 加載d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一個空的svg圖片 -->
    <svg id="curve" height=300 width=600></svg>

    <script>

        // 創(chuàng)建數(shù)據(jù)
        var data=[{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]

        // 創(chuàng)建svg元素
        var svg=d3.select("#curve").append("svg").attr("width", 1800).attr("height", 200)

        // 創(chuàng)建輔助函數(shù)
        var curveFunc=d3.line()
            // 設置線條類型，具體設置參考官方文檔，可以嘗試curveStep.
            .curve(d3.curveBasis)
            .x(function (d) { return d.x })
            .y(function (d) { return d.y })

        svg.append('path')
            .attr('d', curveFunc(data))
            .attr('stroke', 'black')
            .attr('fill', 'none');

    </script>

區(qū)域的添加

html的svg標簽原生語法畫區(qū)域很麻煩，還是用js容易。原生代碼如下所示：

<path style="fill: #69b3a2" stroke="black" d="M0 200 L0 20 L150 150 L300 100 L450 20 L600 130 L600 200"></path>

js代碼如下：

<!-- 原生繪圖 -->
    <svg height=300 width=800>
        <path style="fill: #69b3a2" stroke="black" d="M0 200 L0 20 L150 150 L300 100 L450 20 L600 130 L600 200"></path>
    </svg>

    <!-- 加載d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一個空的svg圖片 -->
    <svg id="area" height=300 width=800></svg>

    <script>

        // 創(chuàng)建數(shù)據(jù)
        var data=[{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]

        // 創(chuàng)建svg元素
        var svg=d3.select("#area").append("svg")

        // 創(chuàng)建輔助函數(shù)
        var curveFunc=d3.area()
            .x(function (d) { return d.x })
            .y1(function (d) { return d.y })     // 區(qū)域上邊界坐標
            .y0(200)                             // 區(qū)域下邊界坐標

        // 添加屬性
        svg.append('path')
            .attr('d', curveFunc(data))
            .attr('stroke', 'black')
            .attr('fill', 'red');

    </script>

圓弧的添加

圓弧的添加也是一樣，js最好。原生代碼如下：

<path style="fill: #69b3a2" stroke="black" transform="translate(400,200)" d="M0,149 A150,150,0,0,1,-0.47,-149.9 L-0.3,-99.9 A100,100,0,0,0,0.15,99.9Z"></path>

現(xiàn)在，讓我們使用d3.arc()輔助函數(shù)來繪制相同類型的形狀。我們需要提供4個參數(shù)：innerRadius、outerRadius、startAngle、endAngle

<!-- 原生繪圖 -->
    <svg height=400 width=400>
        <path style="fill: #69b3a2" stroke="black" transform="translate(400,200)"
            d="M0,149 A150,150,0,0,1,-0.47,-149.9 L-0.3,-99.9 A100,100,0,0,0,0.15,99.9Z"></path>
    </svg>

    <!-- 加載d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一個空的svg圖片 -->
    <svg id="arc" height=400 width=400></svg>

    <script>
        // 創(chuàng)建svg元素
        var svg=d3.select("#arc").append("svg")
        // 添加弧形
        svg
            .append("path")
            .attr("transform", "translate(400,100)") // 平移距離
            .attr("d", d3.arc()
                .innerRadius(100) // 內(nèi)圈半徑
                .outerRadius(150) // 外圈半徑
                .startAngle(3.14)     // 開始角度（弧度），最下方為3.14
                .endAngle(3.14 * 1.6)       // 結(jié)束角度（弧度）
            )
            .attr('stroke', 'black')
            .attr('fill', 'red');
    </script>

其中藍色圓弧是由html繪圖元素創(chuàng)建，紅色圓弧是通過js創(chuàng)建

參考

?Building shapes in d3.js??

在線咨詢

上一篇：干貨來了！小編解讀Win10多窗口排列技巧
下一篇：分享 JavaScript 2024 的 6 個新功

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

使用PyQtGraph 自定義繪圖

概述

安裝

PyQtGraph小部件

造型圖

背景色

線條顏色、寬度和樣式

線條顏色

線標記

畫筆

畫板標題

軸標識

圖例

背景網(wǎng)格

設置軸限制

繪制多條線

清除畫板

更新畫板

總結(jié)

3.js入門教程2-在 d3.js中構(gòu)建形狀

文章目錄

形狀的添加

圓形的添加

矩形的添加

線段的添加

文本的添加

折線的添加

區(qū)域的添加

圓弧的添加

參考

您的項目需求