使用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中文网其他相关文章！