使用D3.J創建簡單的線路和條形圖-js教程-PHP中文網

使用D3.J創建簡單的線路和條形圖

Lisa Kudrow

發布： 2025-02-21 11:20:15

原創

368 人瀏覽過

Creating Simple Line and Bar Charts Using D3.js

>本文使用D3.js（用於數據可視化的JavaScript庫）建立在泡沫圖表上的先前教程。現在，我們將使用D3.J，利用HTML，SVG和CSS來探索創建線路和條形圖。建議熟悉上一篇文章。關鍵要點包括了解D3.js在交互式可視化中的作用，線圖創建的機制（尺度，軸，線生成器），條形圖構造（序數尺度，矩形）以及通過交互性增強用戶體驗（工具提示，事件處理程序，過渡，過渡，）。自定義選項（例如軸縮放和样式）也被突出顯示。

線圖：逐步指南

我們的示例使用以下數據集：

var lineData = [{x: 1, y: 5}, {x: 20, y: 20}, {x: 40, y: 10}, {x: 60, y: 40}, {x: 80, y: 5}, {x: 100, y: 60}];

登入後複製

和一個SVG元素：

<svg id="visualisation" width="1000" height="500"></svg>

登入後複製

我們定義秤，軸和邊緣：>

然後創建

var vis = d3.select('#visualisation'),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {top: 20, right: 20, bottom: 20, left: 50},
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) { return d.x; }), d3.max(lineData, function(d) { return d.x; })]),
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) { return d.y; }), d3.max(lineData, function(d) { return d.y; })]),
    xAxis = d3.svg.axis().scale(xRange).tickSize(5).tickSubdivide(true),
    yAxis = d3.svg.axis().scale(yRange).tickSize(5).orient('left').tickSubdivide(true);

vis.append('svg:g').attr('class', 'x axis').attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')').call(xAxis);
vis.append('svg:g').attr('class', 'y axis').attr('transform', 'translate(' + (MARGINS.left) + ',0)').call(yAxis);

登入後複製

線生成器函數：>

>最後，該行被附加到svg：

var lineFunc = d3.svg.line()
  .x(function(d) { return xRange(d.x); })
  .y(function(d) { return yRange(d.y); })
  .interpolate('linear');

登入後複製

vis.append('svg:path')
  .attr('d', lineFunc(lineData))
  .attr('stroke', 'blue')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

登入後複製

條形圖：在基礎上構建

> 對於條形圖，我們重複使用軸的創建，但要修改尺度並添加矩形：

這個增強的示例包括用於交互性的鼠標和鼠標之路事件處理程序。 D3.J可以進行進一步的自定義和高級技術，從而允許高度量身定制和動態數據可視化。提供的常見問題解答部分提供了有關添加標籤，工具提示，響應能力，動畫，分類，標題，傳說和處理丟失的數據的進一步指南。 >

以上是使用D3.J創建簡單的線路和條形圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！