非常简单的d3.js折线图无法在浏览器中显示
d3.js是一个用于数据可视化的JavaScript库，可以帮助开发人员创建各种类型的图表，包括折线图。如果在浏览器中无法显示d3.js折线图，可能是由于以下几个原因：
- 缺少d3.js库：确保在HTML文件中正确引入了d3.js库。可以通过在<head>标签中添加以下代码来引入d3.js库：
<script src="https://d3js.org/d3.v7.min.js"></script>这将从d3.js官方网站加载最新版本的d3.js库。
- 数据格式错误：检查折线图的数据格式是否正确。d3.js通常需要一个包含数据点的数组来绘制折线图。确保数据格式正确，并且每个数据点都包含必要的属性（例如x和y坐标）。
- SVG容器问题：d3.js通常使用SVG（可缩放矢量图形）来绘制图表。确保在HTML文件中有一个正确配置的SVG容器来容纳折线图。可以在<body>标签中添加以下代码来创建一个SVG容器：
<svg id="chart"></svg>然后，使用d3.js选择该容器并在其中绘制折线图。
- CSS样式问题：检查是否为折线图的SVG元素和其他相关元素应用了正确的CSS样式。确保元素具有适当的宽度、高度和位置，以便在浏览器中正确显示。
如果以上步骤都正确执行，但折线图仍然无法在浏览器中显示，可能需要进一步检查浏览器控制台是否有任何错误消息。此外，确保浏览器支持d3.js库和相关的SVG功能。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，建议访问腾讯云官方网站并搜索相关产品，以获取更多信息和文档。
相关·内容
1回答
我是d3.js的新手，但我已经成功地制作了两个单独的图表，如简介中所示。
我有一张地图，上面有代表监测站的点。我还有一个折线图，其中包含来自一个监控站的多个时间序列(来自json的数据)。
我想做的是。将两个图表放在同一页上。当您将鼠标移到或单击地图上的某个站点时，数据将加载并显示在折线图上。在地图上选择新站点时，折线图上的数据将发生转换
我有一个关于风格的问题。使用两个单独的图表，将它们组合在一起的最佳方式是什么？对于转换，我已经搜索过，但没有找到任何具有两个图表元素的简单示例，其中一个元素与另一个元素交互作用。我应该将所有的时序数据合并到一个json文件中(比如4个时序乘以50个站)，还是
浏览 0提问于2013-05-20得票数 1
回答已采纳
我正在做一个条形图: d3.js中的
我想要有一个上述条形图的组合，并为相同的数据添加一个折线图。
bl.ocks中的所有折线图示例都有很大不同。
我该如何实现这一点？
浏览 3提问于2016-02-20得票数 0
所以我有在mouseover上显示图像的代码，如下所示。但目前，图像显示在文本下方，并干扰了页面上的其他元素。我想让图像对角线出现在文本的右侧和上方。在d3.js中有办法做到这一点吗？ d3.select('#uv')
.on('mouseover', function onClick(d) {
d3.select(this)
.append('img')
.attr("id", "img")
.attr('s
浏览 21提问于2019-06-22得票数 0
我有一个以下格式的数据库
reqested_by | request_date
jack |2014-04-13
john |2014-04-12
james|2014-07-01
我想提取一个月内的请求数。例如在上面的例句中。2014年4月有2个请求，2014年7月有1个请求。这应该以json格式导出，并在d3.js中显示为图表，显示我尝试提取的月份及其计数的请求数，而不是年份
$myquery = " select count(CASE WHEN month(request_date)=1 THEN 1 ELSE NULL END) January,
浏览 1提问于2014-05-04得票数 0
我目前在想如何将我在ruby on rails中创建的哈希值输入到javascript代码中，以便在d3.js中创建折线图来显示一段时间内的数值时遇到了麻烦。
哈希当前设置为{ :date => value、:date => value等}
我做了.to_json来把它们转换成json，但是在javascript中把这些值转换成我的图形的x和y值会有很多麻烦。
有谁能帮我指出正确的方向吗？
谢谢!
浏览 2提问于2016-04-08得票数 0
我有一个显示流服务带宽的d3.js折线图。我知道.format方法，但它似乎只接受Python格式，并且没有内置的智能来处理大量数据的格式。
当我更深入地研究这个问题时，我发现了一些关于如何改进Python格式化工具的想法：
、等。
然而，我不知道如何扩展d3.js来包含这些额外的选项。
如何让刻度和轴标签在b/s、Kb/s和Mb/s等之间巧妙地切换？
一个额外的好处是有一种在位和字节之间切换的方法。
谢谢!
浏览 1提问于2013-05-31得票数 2
我是d3.js的新手，我想使用带有外部json文件的折线图示例：，它位于与index.html相同的文件夹中。
当我将源更改为.json时，我只得到一个空白页面作为结果。如何更改该部分才能使用json数据？
d3.tsv("data.tsv", function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
return d;
}, function(error, data) {
if (error) throw error;
浏览 0提问于2017-11-15得票数 1
3回答
我正在使用C3.js为数据系列创建折线图。
我正在努力尝试只展示其中一个系列的“点”。
基本上，首先我用一些参考数据创建一个多序列折线图，然后我加载(用char.load)一个新的特定数据行，我想在其中显示点，只针对该特定线，而其他参考线保持隐藏点。
这可以通过C3.js实现吗？如果是这样的话，您能指导我这样做吗，谢谢！此外，欢迎任何在使用C3.js的同时使用D3.js的方法。
这是一个正式的例子，在这个例子中，数据序列的所有点都被隐藏了，仅供参考：
浏览 0提问于2014-11-25得票数 5
2回答
Firefox和/或D3差异
、、、、
因此，我在一个网站上有一个页面，它的显示方式与IE和Chrome完全一样，而不是Firefox。链接是。在IE和Chrome中，旋转动画(用D3.js编写)完全通过填充-左和填充-顶显示，但在Firefox中没有显示。有人知道我怎样才能使火狐中的这个填充透明吗？还有其他可能的解决办法吗？如果可能的话，我很想通过CSS来解决这个问题，而不是带着D3代码回到绘图板。当然，如果有必要的话，我会的。
非常感谢你的帮助！
浏览 2提问于2015-01-29得票数 0
回答已采纳
在一个对象中，我存储了用d3.js制作折线图，这些折线图可以刷选定的区域。
当我在折线图的选定部分之外单击时，选定区域将被删除。
我想删除选定的区域点击外部链接，例如。重置
不幸的是，即使我从折线图对象访问画笔对象，在brush对象上调用clear()也不会删除选择。
如何使用外部链接从外部折线图中删除画笔选择？
我创建笔刷：
this.brush = d3.svg.brush()
.x(xScale)
.on('brushstart', function() {
lineChart.brushStart();
})
.on(&#
浏览 2提问于2013-08-09得票数 5
我将编写一个小的图表库(具有条形图、饼图、折线图等图表类型)。将在WordPress上下文中使用。该库可能依赖于外部库，如D3.js、underscore.js等。理想情况下，我不必包含每个页面上的所有图表和所有依赖项。
管理跨WordPress页面和帖子的这些图表的实例化以及加载它们的依赖关系的好方法是什么？Require.js示例，原生WP加载资源或类似的非常受欢迎。
谢谢。
浏览 2提问于2013-04-16得票数 1
1回答
在上获取csv数据失败
、、、
我只是尝试使用d3.js v5获取一个CSV文件。数据获取在除Internet 10+之外的所有浏览器中都运行良好。
d3.csv("test.csv").then(function (data) {
console.log(data);
});
这显示中未定义错误提取。
我正在使用d3.v5.min.js。
浏览 0提问于2019-07-02得票数 1
回答已采纳
3回答
我正在尝试在ASP.NET中绘制折线图。我想从excel文件中导入一些数据，并在浏览时将它们显示在折线图中。
到目前为止，我已经知道了如何导入数据并在网格中显示它们。现在，我想把它带到下一步，并使用该数据绘制折线图。
请告诉我如何在ASP.NET (仅限C#)中绘制折线图的一些指南。
浏览 7提问于2013-05-11得票数 3
回答已采纳
3回答
我最近开始学习使用D3.js框架，虽然它似乎被设计成做我想做的事情，但我找不到一个简单的“实时”更新图的例子。
我正在寻找像折线图这样的东西，它会随着新数据的出现而更新。新的数据可以通过点击带有“最后一次看到”时间戳的json url或者一些其他的AJAX-y方法来获得。
编辑:答案的D3部分如下：
现在，人们如何推荐将新数据从服务器端获取到客户端？
浏览 26提问于2012-10-07得票数 69
1回答
我是研究型学生的资料。我正在编写关于D3.js的关于各种数据属性/类型的报告。我很难找到任何通过D3.js表示科学数据的好例子。我经历过很少的基于重力，动量，力有向图的可视化。但是，我找不到任何能显示科学实验结果的例子，如化学融合，爱因斯坦定律的作用，某些身体中细胞的生长或耗尽，黑洞的功能等。其中，如果我们改变数据变量的值，就会显示出可视化方面的差异。
我希望D3.js不要太多
浏览 4提问于2014-01-09得票数 2
回答已采纳
3回答
我是JavaScript的新手，我很确定我在使用JSfrom页面时缺少了一些基本的东西(被web浏览器浏览)。
我的目标是使用cheerio从中删除照片链接，并将它们显示在js小工具中(例如，使用)，获得以下脚本并通过nodejs scrapt.js在bash终端上运行看起来相当成功：
var request = require('request');
var cheerio = require('cheerio');
request('https://outbox.eait.uq.edu.au/uqczhan2/Photos/', functi
浏览 21提问于2017-03-05得票数 6
2回答
我正在尝试从数据集制作折线图，同时保持X轴分类。对于观察者来说，它看起来像是一个在观察值的X坐标之间具有等间距的折线图：
(1-5- 30 - 600)
现在我得到的东西是这样的：
(1-5-30-600)
这是我的数据集：
var ds1 = [
{
key: 'VAR-1',
color: '#FF7F0E',
values: [
{ "x" : "600", "y" : 0.07706}
, { "x" : "30", "y
浏览 1提问于2013-01-04得票数 6
我无法在d3.js中绘制折线图，我写了一些代码，但启用了显示图形，如何为给定数据绘制折线图。我有一个问题，如何解析给定数据的数据，并为代码的给定数据绘制折线图。
var data=[{"key":[2000,1,1,12],"value":1000},{"key":[2000,2,1,12],"value":38965},
[{"key":[2000,7,1,24],"value":289},{"key":[2000,8,1,24],"value":389}
]
浏览 0提问于2015-01-25得票数 0
1回答
我正在尝试使用节点模块dc折线图来绘制折线图。由于d3的错误，它在我身上失败了。我使用的是dc.js版本2.0.0-beta17。
c:\projects\xxx\node_modules\dc\node_modules\d3\d3.js:1308
d3_behavior_zoomWheel = "onwheel" in d3_document ? (d3_behavior_zoomDelt
^
TypeError: Cannot use 'in' operator to sear
浏览 3提问于2015-08-21得票数 1
1回答
我正在尝试使用d3.js和创建折线图，但我一直收到呈现错误，这似乎导致一些元素无法正确绘制，或者根本没有绘制。
错误控制台中显示的错误是Error: Problem parsing d="MZ"
在查看了nvd3的代码后，我发现该代码使用L连接了一个顶点列表(因此正确的点的一个示例是d="M0 0L1 1L1 0Z)
我用来创建图形的代码是：
nv.addGraph(function () {
var chart = nv.models.stackedAreaChart()
.x(function (d) {
return d[0]
})
浏览 2提问于2013-03-09得票数 4
在Excel 2013中，我有一系列数据，如下所示...
1，#N/A，2，3，4
(注：#N/A是使用=NA()生成的)。
我希望为这些数据制作一个折线图，并将#N/A显示为图表中的间隙。
对此的标准建议是使用“隐藏和空单元格”选项(右键单击图形>选择数据...>隐藏和空单元格)以将空单元格显示为间隙。但是，这对我没有影响，折线图的显示方式与选中'Connect data points with line‘选项时一样。
我已经上传了我在这里引用的示例，以便于查看：
我知道这些差距是可以显示的，因为我已经看到它在Excel中的其他折线图上工作(包括#N/A是要跳过的值的图表
浏览 6提问于2015-07-22得票数 0
我正在尝试将多个图表放在一个jsp页面上。我有一个折线图和条形图的组合。我使用d3.js的酒窝API。敬请指教。Bootstrap似乎不能与此一起工作。
浏览 0提问于2014-07-18得票数 4
我对绘制折线图的概念有疑问。有人能解释这些坐标吗？
x1=5,x2=10,y1=10,y2=30
请解释每个属性及其代表的含义。另外，请给我一个想法，如何画一条直线垂直和水平(如十字线)。
我完全是d3.js图形的新手，所以请帮助我。任何帮助都将不胜感激。
浏览 1提问于2014-08-21得票数 25
回答已采纳
基本上，我想实现一个使用Primefaces折线图的网页，它可以每秒改变一次。
在我的托管bean中，我从数据库中获得100个数据。我希望像显示数据波一样显示折线图，而不是一次性填充所有折线图，这样这100个数据就可以在100秒内显示出来。
我如何实现这一点？
浏览 4提问于2013-04-10得票数 0
回答已采纳
我正在使用Charts.js显示一些折线图，这些折线图在Chrome或Firefox中工作正常，但在Safari中不能正常工作。从源代码看，一切似乎都很好，但图表在Safari中无法正确显示。
问题在于以下链接中的第一个绘图：
浏览 0提问于2018-05-04得票数 0
如果我更改我的css文件并重新加载/刷新我的d3.js驱动的页面，则不会显示css更改。显示css更改的唯一方法是清除浏览器缓存。这个问题不会发生在其他网页，我编辑的网站css。除非缓存被清除，否则使用d3.js保存旧css文件似乎有其独特之处。
由于我不能期望用户每次在加载d3.js驱动的页面之前清除他们的缓存，我如何确保他们得到我的css更改？
d3.js站点结构：
index.php带来了d3.js的头部
<script type="text/javascript" src="d3/d3v428.js"></script>
ind
浏览 1提问于2017-02-17得票数 0
1回答
我正在使用d3.js来制作一个简单的折线图。我想知道是否有一种方法可以在图中创建“洞”，也就是说，当没有可用的数据时，是否可以中断或切断线。
我正在研究从域名中删除我不需要的地方，或者在特定的线段中将线宽设置为0，但我找不到一种方法来完成这两种操作。
谢谢你的帮忙!
浏览 1提问于2013-03-07得票数 24
回答已采纳
2回答
具有D3.JS经验的开发人员能否指出在实践中哪些特定的浏览器和浏览器版本级别最容易支持D3.JS库？
是否有已知与特定浏览器和浏览器版本级别不兼容的D3.JS“组件”列表？
D3.JS网站建议：
D3支持所谓的“现代”浏览器，这通常意味着除了IE8和下面的所有东西。D3是针对火狐、Chrome (Chrome)、Safari (WebKit)、Opera和IE9进行测试的。D3的一些部分可以在旧的浏览器中工作，因为核心D3库的要求非常低: JavaScript和W3C DOM。对于IE8，建议使用兼容性库Aight。D3使用选择器API级别1，但您可以预加载Sizzle以实现兼容性。您将需
浏览 7提问于2013-03-01得票数 42
我有一个问题，我有一个正在构建的报告，我有几个列，我想在折线图中使用，但我似乎无法使它工作，我可以让它在条形图中工作，但它的9个项目沿单个x轴。有没有办法在图表中像使用行一样使用列？
谢谢!
根据要求，下面是一些图片：
数据：
图表设计：
单轴图表(我想要折线图，但因为只有一行，所以什么也没有显示。)
浏览 0提问于2013-07-19得票数 0
回答已采纳
1回答
我正在使用d3.js创建一个vis工具的数据。我在d3文档中看到，可以使用selection.on(type[, listener[, capture]]) API注册事件侦听器。如下文所述：
但是，我无法找到d3支持的事件类型列表。现在我知道有'click'事件、'mouseover'事件和'mouseout'事件。它还支持什么？
非常感谢。
浏览 0提问于2014-02-18得票数 3
回答已采纳
我在d3.js中有一个折线图，其中每年在X轴上都有标签(显示20年的数据)。标签是使用以下命令创建的： g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%b/%d/%Y")).ticks(d3.timeYear))
.selectAll("text")
.style("text-an
浏览 22提问于2020-03-19得票数 2
回答已采纳
1回答
我已经在Neo4j中开发了一个图形数据库，我想在后台制作一个图形数据库的web应用程序。我希望在Neo4j浏览器中可视化的整个图形准确地出现在网页中。我不想再使用d3.js，keyline等javascript库来创建节点和边。请帮助。
浏览 5提问于2015-03-12得票数 3
我正在使用一些构建数据可视化。不过，我犯了个奇怪的错误。下面是我(非常简单)的d3.json()调用：
d3.json(url, function(error, json) {
if (error) return console.warn(error);
data = json;
console.log(data);
});
我得到这个控制台错误：
我真的不知道该怎么解释。FWIW，我的URL采用以下形式：
var url = 'https://congre
浏览 2提问于2014-11-01得票数 1
我有一个有两个窗口的WPF应用程序。一个窗口包含一个WebBrowser控件。另一个窗口包含一个WindowsFormsHost，它承载一个用于绘制折线图的WinForms图表控件。我尝试使用WPF Toolkit提供的图表，但内存消耗不断增加。我正在使用javascript显示一个本地HTML文件，以显示Google地图上的位置。该位置每100毫秒更新一次。除了位置，还收到了一些其他数据，我必须在折线图上显示这些数据。
在测试时，我观察到图形和浏览器都以500ms的间隔同时更新得很好。但当频率更改为100毫秒时，浏览器将停止更新。还可以观察到，如果停止在图表上绘制数据，浏览器平铺将再次加载，
浏览 2提问于2014-09-10得票数 1
我是d3.js的新手，所以请帮助我，我正在尝试实现折线图，但我想从本地变量中获取数据
但是在这一行得到错误
var cities = data.columns.slice(1).map(function(id))
当我console.log(data.columns);的时候，我变得不确定
Uncaught TypeError: Cannot read property 'slice' of undefined
但是得到这个错误
是代码笔
我想实现像这样的东西
浏览 20提问于2016-09-16得票数 0
当我在Chrome中显示SVG (由D3.js创建)时，它有着与Firefox或IE不同的维度。
让我们来看看这个代码：
火狐:g元素是923x473.1。
铬:g元素为921 x 468.094。
如何更改Javascript/CSS/HTML，使此图形在Chrome、firefox、IE中具有相同的位置？
浏览 2提问于2015-08-31得票数 1
回答已采纳
我已经开发了d3.js折线图，但无法连续显示几年和几个月的x轴。
下面给出了Json对象：
var data=[{"key":[2000,0],"value":100},{{"key":[2000,4],"value":200}},{{"key":[2001,3],"value":400}},{{"key":[200,5],"value":700}}]
代码：
var s1=globalD3Variable.map(function (d,i){return {ke
浏览 1提问于2015-01-23得票数 0
1回答
我想在一个独立的网站中显示来自我的Neo4j DB的数据。因此，我正在学习d3.js。
实际上，我想使用Neo4j Browser中使用的可视化，只是稍微修改了一下。
有办法这样做吗。如果我使用另一个d3.js可视化，我必须做很多修改。
实际上我对它很陌生。如果有人能帮我，那就太好了。
谢天谢地
浏览 12提问于2014-12-17得票数 1
1回答
不是d3.js的专家，环顾四周，无法找到/理解如何实现这一点：
<p class='my-text'> Hi! this is a paragraph!</p>
用户高亮显示该段落中的几个单词，这将触发一个事件，该事件从高亮显示的中上角部分创建一条线，然后直接转到一个框供用户评论。
在d3.js中如何做到这一点？有没有资源可以让我看看用d3.js来操作文本？
感谢您的阅读！
浏览 3提问于2014-02-05得票数 0
我有保存在csv文件中的数据。这些数据被用于使用d3.js和javascript创建一些交互式图形。我要运行图形的文件是一些js文件、css和html文件。我不需要任何服务器来运行它。
现在，我想在显示图形的页面上添加一个下载按钮。当用户点击下载按钮时，csv将被下载为pdf/word文件。有人知道怎么做吗？有什么值得推荐的插件吗？
非常感谢!
浏览 0提问于2016-03-17得票数 0
2回答
我正在寻找一些指导或如何在d3.js中做一个地理图的例子。我需要像这样的东西在谷歌图表中，并转向d3.js，因为我需要一些自定义。到目前为止，我找到的最接近的d3.js示例是，但那里的代码非常长，我希望能找到更简单的代码。
浏览 1提问于2012-09-29得票数 6
回答已采纳
我正在使用谷歌图表绘制下面的数据框架。
Group G1 G2
Hour
6 19 1
8 1 2
我已经在折线图中画出了上面的数据框。但我无法将图例和标题添加到折线图中。此外，我还试图增加折线图的大小，因为它看起来非常小。不确定matplotlib中是否有这些选项。任何帮助都将不胜感激。
import matplotlib.pyplot as plt
plt.plot(dft2)
plt.xlabel('Hour')
plt.ylabel('Count')
plt.show()
浏览 13提问于2016-09-27得票数 1
回答已采纳
2回答
我需要一些关于使用d3.js可视化大数据的建议。我从hbase中提取数据，并存储在json文件中，以便使用d3.js可视化。当我提取几个小时的数据时，json文件的大小大约是100 of，可以很容易地被d3.js可视化，但是使用dc.js和交叉过滤器进行的过滤就有点慢了。但是，当我提取1周的数据集时，json文件大小超过1GB，尝试使用d3.js、dc.js和十字过滤器进行可视化，则可视化工作不正常，过滤也不可能进行。有人能告诉我，这是否有一个好的解决方案，或者我需要在不同的平台上工作，而不是d3？
浏览 1提问于2015-04-20得票数 2
回答已采纳
1回答
我试图开发一个简单的交互式应用程序来说明。基本上，我想在这里用D3.js再现这个图：
我正在考虑使用树布局，但这不是树，因为它有循环。我对D3.js非常陌生，这是我尝试生成的一个应用程序，用于自学D3.js。我被手动生成这样的格子所困住了。
在D3.js中可以这样做吗？
浏览 1提问于2014-01-03得票数 3
回答已采纳
1回答
我目前正在尝试在垂直选项卡菜单的内容框中显示我用d3.js创建的折线图。图形本身的d3代码可以在“普通”页面上运行，当我将代码放在选项卡内容框中时，甚至d3代码中的日志也可以运行，但是图形就是不显示。内容框中的其他项目，如图像或标题，都可以正常工作。 这是我代码中的html部分。 <h1 id="testheading"> Test </h1>
<div class="tab">
<button class="tablinks" onclick="openArg(event,&#
浏览 20提问于2019-07-01得票数 0
我在asp.net web应用程序中使用TeeChart折线图。
当鼠标悬停在图形中的某个点上时，我希望显示工具提示。
这可以做到吗？
浏览 0提问于2012-04-29得票数 1
回答已采纳
1回答
由于某些原因，我无法获得一个非常简单的折线图来显示，即使我正在使用来自以下来源的代码片段：https://www.dashingd3js.com/svg-paths-and-d3js 我对d3还是个新手。 我意识到源代码片段没有xScale或yScale变量( StackOverflow上的一些解决方案推荐)，所以我尝试将它们合并到代码片段中，但无济于事……我甚至不确定我是否正确地使用了scale函数。我已经获得了要显示的svg path版本，但出于交互原因，我需要将其转换为d3脚本。 <script src="d3.min.js"></script>
浏览 17提问于2019-04-01得票数 2
回答已采纳
我有一个工作的图表折线图，我已经按照文档中的建议配置了插件。在加载页面时，我没有得到任何错误。根据plugin的说法，图表中没有任何东西被反映出来。我已经添加了两个插件--它们没有显示任何错误，我的折线图显示得非常好。
但是我看不到这些插件的效果--工具提示插件和点标签插件。
是的，它们被加载到HTML中，而且它们的css文件也包含在内，否则会出现插件不存在的错误。
var options = {
low: 0,
high: 100,
showGridBackground: false,
showArea: true,
axisX: {
浏览 9提问于2017-08-17得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
