d3.js——箭頭的繪製

阿新 • • 發佈：2019-01-15

首先我們要明白如何在svg中進行箭頭的繪製：

先寫一對<defs>，裡面再寫一對<marker>，其中marker的屬性意義為：

viewBox	座標系的區域
refX, refY	在 viewBox 內的基準點，繪製時此點在直線端點上（要注意大小寫）
markerUnits	標識大小的基準，有兩個值：strokeWidth（線的寬度）和userSpaceOnUse（圖形最前端的大小）
markerWidth, markerHeight	標識的大小
orient	繪製方向，可設定為：auto（自動確認方向）和角度值
id	標識的id號

然後，我們利用d3.js來進行箭頭的繪製就清楚多了：

//新增defs標籤
var defs = svg.append("defs");
//新增marker標籤及其屬性
var arrowMarker = defs.append("marker")
    .attr("id","arrow")
    .attr("markerUnits","strokeWidth")
    .attr("markerWidth",12)
    .attr("markerHeight",12)
    .attr("viewBox","0 0 12 12")
    .attr("refX",6)
    .attr("refY",6)
    .attr("orient","auto")

//繪製直線箭頭
var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
arrowMarker.append("path")
    .attr("d",arrow_path)
    .attr("fill","#000")
//繪製直線
var line = svg.append("line")
    .attr("x1",50)
    .attr("y1",50)
    .attr("x2",200)
    .attr("y2",400)
    .attr("stroke","red")
    .attr("stroke-width",2)
    .attr("marker-start","url(#arrow)")
    .attr("marker-end","url(#arrow)")

//繪製曲線箭頭
var curve_path = "M20,70 T80,100 T160,80 T200,90";
var curve = svg.append("path")
    .attr("d",curve_path)
    .attr("fill","white")
    .attr("stroke","red")
    .attr("stroke-width",2)
    .attr("marker-start","url(#arrow)")
    .attr("marker-mid","url(#arrow)")
    .attr("marker-end","url(#arrow)");

在不同的位置繪製的屬性如下：

marker-start ：路徑起點處
marker-mid：路徑中間端點處（必須是 path 中間出現的點）
marker-end ：路徑終點處

繪製結果如下：

d3.js——箭頭的繪製

首先我們要明白如何在svg中進行箭頭的繪製：先寫一對<defs>，裡面再寫一對<marker>，其中marker的屬性意義為： viewBox 座標系的區域 refX, refY 在 viewBox 內的基準點，繪製時此點在直線端點上（要注意大小寫

【 D3.js 進階系列 — 4.0 】繪製箭頭

在 SVG 繪製區域中作圖，在繪製直線和曲線時，常需要在某處新增箭頭。本文介紹如何在 D3 中給直線和曲線新增箭頭。到目前為止，我們繪製 D3 的圖表都是在 SVG 繪製區域內，雖然 D3 也可用 Canvas 或 WebGL 等作圖，但 SVG 是最常用的。那麼，用 D3

d3.js繪製箭頭

1. 在 SVG 中定義箭頭的標識定義箭頭的標識如下，先寫一對 <defs> ，裡面再寫一對 <marker>，其中 marker 的屬性的意義為： viewBox 座標系的區域 refX, refY 在 viewBox 內的基準點，繪製

使用D3.js繪製順化曲線圖面積圖表

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <li

使用D3.js繪製順化曲線圖、座標軸

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <li

利用d3.js繪製一個矩形圖表

<template> <div> </div> </template> <script> import * as d3 from 'd3' export default { mounted(){

D3.js繪製柱形圖

注意：此次繪製的柱形圖不涉及座標。步驟：一.新增矩形。 <script type="text/javascript"> var datest = [30,78,90,210,105,98,150,177]; //繪製柱形圖所用的資料 var wid

d3.js——樹狀圖的繪製

樹狀圖和叢集圖其實差不多，就一點點不一樣，見下圖：圖（1）：叢集圖——d3.layout.cluster() 圖（2）：樹狀圖——d3.layout.tree() 這樣一來差別就看出來了。由於兩者的程式碼差不多，這裡就直接附上樹狀圖原始碼，不多加解釋咯~ city

D3.js學習總結（五）——基本繪製（1）

線段在SVG中，線段的元素是<line>，或者<path>也可以繪製線段。所以d3程式碼為如下形式： // line形式新增線段 svg.append("line") .attr("x1", 20).attr("y1

D3.js初體驗 —— 線型圖表與座標軸的繪製

我們先來說一下利用D3來繪製線型圖表與座標軸的思路： 1、定義圖表容器：container 2、定義一些資料來生成資料曲線 3、給圖表新增座標軸，包括文字接下來就開始幹活吧! 建立好HTML檔案d3Test.html： <pre style="font-fami

使用D3.js繪製重慶地圖

重慶市地圖json資料下載連結https://pan.baidu.com/s/19eZfuGGRY6JOrH9WnZJ5iw 密碼h5f9D3.js下載連結:https://pan.baidu.com/s/13wKelQUjueTY-pP4zUEkww 密碼15te由於JSO

d3.js—— 繪製二維陣列的動態圖表

在繪製二維陣列的動態圖表之前，我們先來理一下思路： 1、我們需要繪製一張圖表； 2、這張圖表的資料來源是二維陣列； 3、這張圖表有動態效果。那麼，我們一步一步來：首先，我們來隨意寫一串二維陣列，確定資料來源： var data =[[1993,10],[1998,20]

【D3.JS資料視覺化實戰記錄】繪製動態狀態變化趨勢圖

參考d3js.org的Health&Wealth例項（http://bost.ocks.org/mike/nations/）按照時間展示節點狀態變化。需要展示的json: [{"calendar":"2012-01-01 12:00:00", "value

d3.js——直方圖的繪製及過去知識點的結合

//隨機生成資料 var rand = d3.random.normal(0,25) var dataset = []; for (var i = 0;i <100;i++){ dataset.push(rand()); } 一、直方圖資料轉換函式： //資

D3.js座標軸的繪製方法、新增座標軸的刻度和各比例尺的座標軸(V3版本)

座標軸(Axis) 座標軸(Axis)在很多圖表中都可見到，例如柱形圖、折線圖、散點圖等。座標軸由一組線段和文字組成，座標軸上的點由一個座標值確定。但是，如果使用SVG的直線和文字一筆一畫的繪製座標軸，工作量將會極其的大。D3提供了座標軸的製作方法，需要之前所給大家講的比例尺一起使用。開發者

D3.js 入門學習(一)

min() 元素選擇器 eight 也會 127.0.0.1 暫時網絡 doc 學習一、安裝D3.js 1.網絡連接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安裝

D3.js 使用縮放zoom時節點無法拖動，只能整體移動的問題

func blank on() sta blog function targe light event .on("dragstart", function() { d3.event.sourceEvent.stopPropagation();

d3.js學習

index src back svg tle cti none cal utf-8 畫svg圖像 1.添加svg元素 2.添加g元素，g元素是一個分組的元素，相當於html中的div元素 3.畫圖像 4.畫坐標軸 ------------------------------

D3.js

隊列 ica 需要默認 attr 標準 ubi 集中 ogr D3.js：D3.js是一個基於數據操作文檔的JavaScript庫，它通過使用HTML，SVG和CSS，給數據帶來了生的形式。D3強調的是在web標準上無需給出你自己專用的框架，就能在現代瀏覽器上給出健全的性

【 D3.js 入門系列 --- 9.4 】集群圖的制作

all users bject nodes -- 部分函數選擇 water 本人的個人博客為： www.ourd3js.com csdn博客為： blog.csdn.net/lzhlzz 轉載請註明出處，謝謝。

d3.js——箭頭的繪製

相關推薦