html页面添加多个图表,在html页面上定位多个d3图表的问题(Problems positioning multiple d3 graphs on html page)...

在html页面上定位多个d3图表的问题(Problems positioning multiple d3 graphs on html page)

我需要在一个网页上定位多个(最终4个，但我从这里开始两个)d3图表。 在本教程之后 ，我创建了两个div：

然后我将图形附加到它们各自的div中，如下所示：

var svg = d3.select("#line-graph").append("svg")

和

var svg = d3.select("#donut").append("svg")

然而，它们仍然在页面上相互叠加。 我错过了什么？

我知道还有其他人遇到过这个问题，但很多问题要么没有答案，要么答案没有解决我的问题。 你可以在这里看到我在说什么。

提前致谢。

I need to position multiple (ultimately 4, but I am starting with two here) d3 graphs on one web page. Following this tutorial, I created two divs:

And then I appended the graphs to their respective divs like so:

var svg = d3.select("#line-graph").append("svg")

AND

var svg = d3.select("#donut").append("svg")

Yet, they are still on top of each other on the page. What am I missing?

I know there are other people who have had this problem, but a lot of those questions are either unanswered, or the answer did not solve my problem. You can see what I am talking about here.

Thanks in advance.

原文：https://stackoverflow.com/questions/27091174

更新时间：2020-09-28 12:09

最满意答案

您的脚本都声明了名为'svg'的全局变量，然后在加载文件后在回调中引用此全局变量。 如果检查图形，您将看到它们实际上都在同一个SVG元素上，而线图应该在的SVG元素是空的。

您需要在第二个脚本中重命名变量，以使它们的名称与第一个脚本中的变量不同。

Both your scripts declare global variables named 'svg' and then reference this global variable in the callback after the file is loaded. If you inspect your graphs, you'll see that they are actually both on the same SVG element and the SVG element that the line graph should be on is empty.

You need to rename your variables in your second script so that they have different names than the variables in the first script.

相关问答

我也被困在同一个问题上。 我知道你找到了一个解决方案，但我认为我会提供我发现的内容以防止其他人最终访问此页面，因为这个问题比我发现的任何其他内容更准确地描述了我的问题。 我的解决方案最终来自以下Stack Overflow帖子。 答案解释了您需要向侦听器添加命名空间，否则在添加新侦听器时将删除现有侦听器。 如何有多个d3窗口调整大小事件 对于此示例，我不得不更改此代码： d3.select(window).on("resize", render);

至 var resizeId

...

你需要在你传递给d3.json但不在它之外的回调函数(错误，图形)中设置svg 原因：您传递给d3.json的回调函数是异步调用的，即当您循环遍历eventss数组时，每次迭代它将无法正常运行。 在循环结束后，似乎所有4个回调都返回，因此svg被设置为它在该循环中的最后一个值，因此所有内容都被添加到该svg元素中。 You need to set svg within the callback function(error, graph) you pass to d3.json and not o

...

这不是因为你把它保存为jsp或html页面。 您需要在脚本声明中添加charset =“UTF-8”，因为d3.js使用UTF字符。 例如。

It is not because you saved it as jsp or html page. You need to add charset="UTF-8" to your script declaration as

...

这是一个非常简单的例子，你可以玩： canvas.selectAll("rect")

.attr("width", 0)

.transition()

.delay(function(d, i){ return i*50; })

.duration(1000)

.attr("width", function (d) { return d.amount * 10; })

它的工作原理是首先将所有的宽度设置为0 ，然后创建一个持续1秒(1000毫秒)

...

您的脚本都声明了名为'svg'的全局变量，然后在加载文件后在回调中引用此全局变量。 如果检查图形，您将看到它们实际上都在同一个SVG元素上，而线图应该在的SVG元素是空的。 您需要在第二个脚本中重命名变量，以使它们的名称与第一个脚本中的变量不同。 Both your scripts declare global variables named 'svg' and then reference this global variable in the callback after the file i

...

我找到了解决这个问题的方法。 由于D3沿远离指定位置生成svg标记，因此最好使用nativeElement强制D3在指定位置生成图表。 通过这种方式，我们强制D3生成放置在特定位置的指定DOM元素 var svg = d3.select(this.el.nativeElement).append("svg")

.attr("width", (this.diameter + 800))

.attr("height", this.diameter)

...

你有一个https问题(尝试在https网站上加载http资产)。 不要将协议定义为引用资产的http://或https:// ，而是尝试使用协议不可知// OOOOPS Found the clue and (incomplete) answer to my own question: it was my Chrome browser. I was trying to figure out what was happening and there was a thingie on my chro

...

这个片段有问题： data.forEach(function (d) {

d.date = parseTime(d.date);

d.units = parseInt(d.units);

});

tdata.forEach(function (d) {

d.date = parseTime(d.date);

d.units = parseInt(d.units);

});

tdata和data是包含对相同对象的引用的数组。 所以第二个forEach然后作用于相同的对象并且pars

...

你有很多重复的变量在这里！ 这根本行不通。 解决这个问题的正确方法是重命名所有变量(如果图表大不相同)或创建一个多次调用的函数(例如，如果图表相同且只有数据发生变化)。 同时，这是一个快速而懒惰的解决方案：我将两个代码包装在IIFE中： (function chart1(){

//code here for chart1

}())

(function chart2(){

//code here for chart2

}())

这是plunker： https ：//plnkr.

...

这是我到目前为止使用的结构，并且对我有用 DATA RETRIEVING SERVICE

|

|

-------------CONTROLLER------------

| |

...