D3.js线形图-在背景中添加网格并绘制线条曲线
基础概念
D3.js（Data-Driven Documents）是一个JavaScript库，用于使用数据来操作文档。它允许开发者使用SVG、Canvas和HTML来创建复杂的可视化效果。线形图是一种常见的图表类型，用于展示数据随时间或其他连续变量的变化。
相关优势
- 数据驱动：D3.js的核心理念是数据驱动，使得数据的可视化更加直观和灵活。
- 高度定制化：D3.js提供了丰富的API，可以轻松实现高度定制化的图表。
- 强大的交互性：D3.js支持丰富的交互功能，如缩放、平移、工具提示等。
类型
D3.js中的线形图可以分为以下几种类型：
- 简单线形图：展示数据点的连线。
- 平滑线形图：通过插值算法使线条更加平滑。
- 带网格的线形图：在背景中添加网格，便于读数和对比。
应用场景
线形图广泛应用于各种场景，如股票价格、温度变化、销售数据等。
实现步骤
以下是一个简单的示例，展示如何在D3.js中创建一个带网格的线形图。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3.js Line Chart with Grid</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.grid line {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
</style>
</head>
<body>
<svg width="800" height="400"></svg>
<script src="script.js"></script>
</body>
</html>JavaScript部分（script.js）
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const x = d3.scaleLinear()
.domain([0, 10])
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, 100])
.range([height, 0]);
const line = d3.line()
.x(d => x(d.x))
.y(d => y(d.y));
const data = [
{ x: 0, y: 20 },
{ x: 1, y: 30 },
{ x: 2, y: 50 },
{ x: 3, y: 70 },
{ x: 4, y: 60 },
{ x: 5, y: 40 },
{ x: 6, y: 30 },
{ x: 7, y: 50 },
{ x: 8, y: 80 },
{ x: 9, y: 90 },
{ x: 10, y: 70 }
];
svg.append("g")
.attr("class", "grid")
.attr("transform", `translate(0,${height})`)
.call(g => g.selectAll(".tick")
.data(x.ticks())
.enter().append("line")
.attr("class", "tick")
.attr("x1", d => x(d))
.attr("x2", d => x(d))
.attr("y1", 0)
.attr("y2", -5));
svg.append("g")
.attr("class", "grid")
.call(g => g.selectAll(".tick")
.data(y.ticks())
.enter().append("line")
.attr("class", "tick")
.attr("x1", 0)
.attr("x2", 5)
.attr("y1", d => y(d))
.attr("y2", d => y(d)));
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));可能遇到的问题及解决方法
- 网格线不显示：确保CSS样式正确应用，并且网格线的
x1,x2,y1,y2属性设置正确。 - 线条曲线不平滑：使用
d3.line()的插值方法，如d3.curveMonotoneX或d3.curveCatmullRom。
const line = d3.line()
.x(d => x(d.x))
.y(d => y(d))
.curve(d3.curveMonotoneX);- 坐标轴标签重叠：调整坐标轴标签的角度或间距。
svg.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x).tickFormat(d3.format(".0f")).ticks(10).tickSize(-height).tickPadding(10));
svg.append("g")
.call(d3.axisLeft(y).tickFormat(d3.format(".0f")).ticks(10).tickSize(-width).tickPadding(10));参考链接
通过以上步骤和示例代码，你可以创建一个带网格的线形图，并解决常见的绘制问题。
相关·内容
1回答
有没有人知道我会如何在我制作的d3折线图的背景中添加一个网格，也有人知道我会如何使我的折线图曲线，而不是像现在这样相当僵硬。下面的代码是为线图和它的所有工作与数据文件我有，我只需要它有一个网格的背景和曲线，而不是它是现在。我还需要让y轴显示百分比而不是小数，任何帮助都将不胜感激。
浏览 94提问于2021-02-07得票数 0
回答已采纳
我有一个图，我想填充LOWESS线下的区域，用于平滑直方图。在matplotlib中，我认为应该使用plt.fill_between()，但是由于某种原因，我拥有的示例代码没有完成我所期望的工作；它填充了一些内容，但这些内容是交错的，并且不是从y=0开始的。
浏览 95提问于2019-10-18得票数 0
回答已采纳
在Spotfire中，我试图从与我的绘图不同的数据表中的列中绘制三条水平曲线。这些行应该是目标行。我知道我可以在组合图或属性中的线条和曲线中做到这一点。然而，我不喜欢在组合图中这样做，因为我必须添加颜色，当我将颜色添加到三个不同的目标线时，我会得到许多不同的系列。所以我试着在"Add > hor
浏览 2提问于2015-12-21得票数 3
我试图用用D3.js制作一个能量流图。在我看到的每一个中，节点之间的链接看起来都是相似的，并且是连续曲线的。我的理解是，Sankey库代码使用D3形状库绘制三次bézier曲线。我想知道是否有任何标准的方法来绘制更复杂的连接链接？
具体来说，我希望这些连接看起来像创建的或中的。这两者在曲线之前都有某种“缓冲区”，而对角线段看起来彼此平行(或有些平行)。对于我的情况，我更希望所有的对角线剖面在
浏览 1提问于2018-02-28得票数 0
2回答
我正在努力学习D3 JS，以及如何在当前的应用中应用它，我是这个应用程序的新手。
在浏览应用程序时，我发现已经有了一个功能，可以使用EXT图表以图形的形式提供数据可视化。
浏览 1提问于2014-03-05得票数 0
回答已采纳
我在x，y空间绘制一系列曲线，其中每条曲线都是由标量值z标识的。我希望将z值映射为每条线的颜色，但大多数共格图/颜色表都是根据图像构造的(例如，在白色的背面，灰度颜色图隐藏了z的一个极端)。彩虹/光谱/喷射彩色图在许多绘图程序中是默认的，它更好，但在白色背景上黄色/青色线的能见度很低，蓝色/青色/绿色之间的颜色对比度也很差。我要找的几个方面
浏览 7提问于2011-08-31得票数 30
回答已采纳
2回答
现在，我使用一个纹理作为“绘制缓冲区”，并绘制该纹理的屏幕。对于最简单的事情，它是有效的。但我看不出有什么方法可以在纹理上画线、弧线等。我该怎么做呢？
浏览 0提问于2010-12-29得票数 4
回答已采纳
5回答
我正在用gnu图绘制一些数据曲线，它们如下所示：然而，图例中的线条样本太薄了。当你有更多的曲线时，就很难分辨颜色。您可以使用“线宽”来增加曲线的厚度，例如，在绘图命令中添加"lw 3“，您将得到以下结果：然而，这增加了任何地方的厚度。难道只有传说中的线条才有可能吗？
浏览 2提问于2012-06-15得票数 8
回答已采纳
2回答
现在我需要绘制一条角度分布曲线，即x轴上的角度v/s no.of乘以y轴上出现的角度的频率。并将其绘制成一条分布曲线
浏览 0提问于2017-05-24得票数 0
我在一个使用java语言的web应用程序中工作。我有一个显示复合迷你图的需求，因此我在jsp页面上使用sparkline jquery。我必须在画布上的背景中设置一个图像，在那里绘制迷你图。我正在使用这个链接中的sparkline jquery。
上面的jquery允许我绘制一个复合的折线图，但是当我在标签上设置样式(背景-图像)时，它不会在迷你图画布的背景<e
浏览 0提问于2012-03-14得票数 0
回答已采纳
2回答
数独网格的UIKit控件？
、、、、
相当有趣，我可以补充一句……
任何人，所以我真的很有兴趣把这个小求解器放到iPhone应用程序中。我真的不知所措，我不知道该采取什么方法来在屏幕上显示网格。我能想象的最糟糕的方式是，81个单独的UITextFields有81个单独的网点……在可可应用程序中，我会简单地将它们嵌入到NSMatrix中，然后就可以上路了，但在iPhone上没有NSMatrix的替代品我现在正在考虑生成一个超文本标记语言文件并将其显示在UIWebView中，但这似乎也不是最好
浏览 0提问于2010-07-27得票数 1
回答已采纳
我正在用d3.js制作一个带有图表标签的简单线条图。
在第二个图表中，标签不仅仅是隐藏的。它们根本没有附加到DOM中。这一切为什么要发生？
浏览 2提问于2014-01-22得票数 1
回答已采纳
我正在使用D3.JS创建一个仪表板，用户可以从列表中选择要绘制的变量数。如果用户选择一个或两个变量，我想要创建一个区域图。如果用户选择两个以上的变量，那么我只想创建区域图的边缘(即线条图)。我知道在创建线条图的代码中不需要进行任何更改。如何将条件语句添加到绘制区域图的代码部分？entries = [ { "key":"variable
浏览 3提问于2014-03-06得票数 0
回答已采纳
1回答
海图上的水平带区
、、
我一直在处理颤振包syncfusion_flutter_charts。我一直很喜欢它，但即使在试图搜索文档之后，我也不知道如何完成我的应用程序所需的图表的某些部分：
最后应该是这样的：不要介意要点，我想知道如何使图表背景在
浏览 1提问于2020-12-03得票数 0
回答已采纳
2回答
当我尝试在Matlab中做数值微分时，我遇到了问题。但我的问题可能更多的是关于数值分析，而不是关于Matlab。f(x) = 577.4063,311.3341,193.0833,141.3048，95.1501，58.8130 32.4931，6.9511，0.1481
我可以插值得到一条平滑的曲线二阶导数在步长方面非常不
浏览 1提问于2012-03-28得票数 4
回答已采纳
我可以创建一个这样的流程图吗：
使用库从json对象开始？你有什么我可以分析的例子吗？
非常感谢。
浏览 0提问于2014-03-06得票数 37
回答已采纳
我正在重写我的一些图形绘制代码，从SKShapeNodes到CGContext/CALayers。我正在尝试用CGContext中的发光绘制一条曲线。这是我在SpriteKit中曾经拥有的：SKShapeNode *node = [SKShapeNode node];node.glowWidth = 60;
将其添加到具有深灰色背景的场景中后，结
浏览 0提问于2014-04-16得票数 1
1回答
让折线图在y轴上工作？
、、、、
如果我必须在同一张图中绘制折线图，如链接中的第一个示例所示，但y轴似乎有问题。它没有显示第一个和第二个折线图之间的正确比率。请看下面两张图片：
谢谢！
浏览 1提问于2011-12-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
