html页面添加多个图表,在一个HTML页面中不能有多个图表 - d3(Cannot have multiple charts in one HTML page - d3)...

在一个HTML页面中不能有多个图表 - d3(Cannot have multiple charts in one HTML page - d3)

我需要有两个相同的组条形图，一个在另一个之下。

我只是复制了代码并定义了两个div和两个SVG

我想要两次这张图表。

但结果却是这样。

谁能告诉我我的问题是什么？

HTML ：

Javascript ：

//SVG for the second chart

var svg2 = d3.select('#chart1').append("svg2").attr('width', 800).attr('height', 550),

margin = {top: 20, right: 20, bottom: 20, left: 40},

width = +svg2.attr("width") - margin.left - margin.right,

height = +svg2.attr("height") - margin.top - margin.bottom,

g = svg2.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

I need to have two same group bar charts, one below another.

I just copied the code and defined two divs and two SVGs

I want to have this chart twice.

But I have this as a result.

Can someone tell me what is my problem?

HTML:

Javascript:

//SVG for the second chart

var svg2 = d3.select('#chart1').append("svg2").attr('width', 800).attr('height', 550),

margin = {top: 20, right: 20, bottom: 20, left: 40},

width = +svg2.attr("width") - margin.left - margin.right,

height = +svg2.attr("height") - margin.top - margin.bottom,

g = svg2.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

更新时间：2020-09-06 11:09

最满意答案

你有很多重复的变量在这里！ 这根本行不通。

解决这个问题的正确方法是重命名所有变量(如果图表大不相同)或创建一个多次调用的函数(例如，如果图表相同且只有数据发生变化)。

同时，这是一个快速而懒惰的解决方案：我将两个代码包装在IIFE中：

(function chart1(){

//code here for chart1

}())

(function chart2(){

//code here for chart2

}())

这是plunker： https ：//plnkr.co/edit/IoTUkqrGWmunrSW9x9ls ? p = preview

再一次，这不是解决这个问题的正确方法，我只是为了看到变量是有作用域的。 我建议你改变变量，或者更好的是，如果两个图表的代码相同，只需将它全部放在一个函数中，这个函数可以调用两次(具有相同的参数或不同的参数，这取决于你)。 喜欢这个：

function draw(selector){

var svg = d3.select(selector).append("svg")

//etc...

}

draw("#chart1");

draw("#chart2");

这是相应的plunker： https ：//plnkr.co/edit/7bZhmmMV1CjUgx7v59wY ？ p = preview

You have tons of duplicated variables here! That simply won't work.

The correct way to fix this is renaming all the variables (if the charts are substantially different) or creating a function that you call multiple times (if the charts are the same and only the data changes, for instance).

Meanwhile, here is a quick and lazy solution: I wrapped your two codes inside IIFEs:

(function chart1(){

//code here for chart1

}())

(function chart2(){

//code here for chart2

}())

Again, this is not the correct way to fix this, I'm doing this only for you to see that variables are scoped. I suggest that you change the variables or, even better, if the code is the same for both charts, simply put all of it inside a function that you call twice (with the same arguments or with different arguments, that's up to you). Like this:

function draw(selector){

var svg = d3.select(selector).append("svg")

//etc...

}

draw("#chart1");

draw("#chart2");

相关问答

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

至 var resizeId

...

从我所知道的情况来看，图表函数在视图实际上被添加到类“a”的div之前被调用。 我做了一些编辑(搜索edit_comments文本)，并且它在我运行代码片段时似乎工作。 //chart function

function chart(className){

var margin = {top: 20, right: 20, bottom: 30, left: 40},

width = 100 - margin.left - margin.right,

heigh

...

如果不使用var声明变量，它将变为全局变量。 所以，这是两个函数内部的简单修复： var tip = d3.tip()

.attr("class", "d3-tip")

.direction("s")

.html(tipRenderer);

这是您更新的小提琴： https ： //jsfiddle.net/wd08acg1/ If you don't declare your variable using var, it becomes a global. So, th

...

在arcTween返回arc(d)时： function arcTween(transition, newAngle) {

transition.attrTween("name", function(d) {

var interpolate = d3.interpolate(d.endAngle, newAngle);

return function(t) {

d.endAngle = interpolate(t);

...

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

...

默认情况下，SVG以内inline方式显示。 这就是为什么在你链接的代码中，第一个SVG取得左上角，而第二个SVG取右上角。 检查这个演示，两个SVG都附加到主体上，第一个在左上角，第二个在右侧： var svg = d3.select("body").selectAll("foo")

.data([1, 1])

.enter()

.append("svg")

.attr("width", 100)

.attr("height", 100); svg {

bac

...

这是一个有效的例子： jsfiddle 您应该使用var声明变量data This is working example: jsfiddle You should declare a variable data with var

将SVG封装在div中

//your svgs\

然后 在你的CSS .svg-div{

display: inline-block;

margin: 0 auto;

}

您可能还需要调整div的宽度 Wrap your SVG's in a parent div

then in your CS

...

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

//code here for chart1

}())

(function chart2(){

//code here for chart2

}())

这是plunker： https ：//plnkr.

...

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

|

|

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

| |

...