Javascript 一个HTML页面中不能有多个图表-d3

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

我只是复制了代码，定义了两个div和两个svg

我想要两张图表

但我有一个结果

有人能告诉我我有什么问题吗

HTML：

<div class="svg-div">
<svg id="svg1" width="1000" height="500"></svg>
<svg id="svg2" width="1000" height="500"></svg>
<script src = "barchart.js"> </script>
</div>

//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 + ")");

我做了一个小小的改变，应该能使它起作用。append（）需要一个有效的元素，所以只需追加一个svg即可

---

我做了一个小小的改变，应该能使它起作用。append（）需要一个有效的元素，所以只需追加一个svg。

这里有大量重复的变量！那根本行不通

解决这一问题的正确方法是重命名所有变量（如果图表本质上不同）或创建一个多次调用的函数（例如，如果图表相同且仅数据发生更改）

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

(function chart1(){
    //code here for chart1
}())

(function chart2(){
    //code here for chart2
}())

这是普朗克：

同样，这不是解决这个问题的正确方法，我这样做只是为了让你看到变量的作用域。我建议您更改变量，或者，更好的是，如果两个图表的代码相同，只需将所有变量放在您调用两次的函数中（使用相同的参数或使用不同的参数，由您决定）。像这样：

function draw(selector){
    var svg = d3.select(selector).append("svg")
    //etc...
}

draw("#chart1");
draw("#chart2");

---

下面是相应的plunker:

这里有大量重复的变量！那根本行不通

解决这一问题的正确方法是重命名所有变量（如果图表本质上不同）或创建一个多次调用的函数（例如，如果图表相同且仅数据发生更改）

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

(function chart1(){
    //code here for chart1
}())

(function chart2(){
    //code here for chart2
}())

这是普朗克：

同样，这不是解决这个问题的正确方法，我这样做只是为了让你看到变量的作用域。我建议您更改变量，或者，更好的是，如果两个图表的代码相同，只需将所有变量放在您调用两次的函数中（使用相同的参数或使用不同的参数，由您决定）。像这样：

function draw(selector){
    var svg = d3.select(selector).append("svg")
    //etc...
}

draw("#chart1");
draw("#chart2");

---

下面是相应的plunker:

Its似乎创建了两个图表，但第一个图表现在在SVG中不再包含任何内容。谢谢，但正如您所说，它仍然只显示其中一个，而不是两个。你知道我如何使它工作吗？为什么不使用类而不是ID？它似乎创建了两个图表，但第一个图表现在在SVG中不再有任何内容。谢谢你，但正如你所说，它仍然只显示其中一个，而不是两个。你知道我该怎么做吗？为什么不使用class而不是ID呢？