D3 Dimple - 如何在同一页面上显示多个波形图？ [英] D3 Dimple - How to show multiple dimple charts on same page?
问题描述
我正在制作一个html页面，其中包含几个我将使用的图表示例。在页面上我有一个Dimple折线图，一个饼图，一个wordcloud等。当我尝试添加第二个凹坑图 - 这一次的条形图，我已经在页面上的第一个凹坑线图是绘制在顶部的条形图：
我的HTML文件如下所示：
<！DOCTYPE html&
< html lang =en>
< head>
< meta charset =UTF-8>
< title> D3图表< / title>
< link rel =stylesheettype =text / csshref =_ / base.css>
< link rel =stylesheettype =text / csshref =_ / c3CSS.css>
< script type =text / javascriptsrc =_ / d3.min.js>< / script>
< script type =text / javascriptsrc =_ / dimple.v2.1.0.min.js>< / script>
< script type =text / javascriptsrc =_ / c3.min.js>< / script>
< script type =text / javascriptsrc =_ / d3.layout.cloud.js>< / script>
< / head>
< body>
< div id =chartContainer>
< h1>热门主题行< / h1>
< script type =text / javascriptsrc = CurvyLine.js>< / script>
< / div>
< h1>热门主题饼< / h1>
< div id =chart>
< script type =text / javascriptsrc = Pie.js>< / script>
< / div>
< div id =wordCloud>
< h1>可点击词云< / h1>
< script type =text / javascriptsrc = WordCloud.js>< / script>
< / div>
< div id =bar>
< h1>可点击词云< / h1>
< script type =text / javascriptsrc = WeekBar.js>< / script>
< / div>
< / body>
< / html>
没有在最后添加条形图，线图正确显示在页面顶部饼图。但是，添加条形图后，线和条形图都会在条形div中绘制。任何人都可以帮助这个请吗？这是我的线图js文件：
var svg = dimple.newSvg（＃chartContainer，590，400）
d3.tsv（data / tweet_example.tsv，function（data）{
// data = dimple.filterData（data，Owner，[Aperture ，Black Mesa]）
var myChart = new dimple.chart（svg，data）;
myChart.setBounds（60，30，505，305）;
var x = myChart.addCategoryAxis（x，Month）;
x.addOrderRule（Date）;
myChart.addMeasureAxis（y Tweets）;
var s = myChart.addSeries（Topic，dimple.plot.line）;
s.interpolation =cardinal;
myChart.addLegend（60，10，500，20，right）;
myChart.draw（）;
}）;
这里是我的条形图js文件：
var svg = dimple.newSvg（＃bar，800，410）;
d3.tsv（data / tweet_example2.tsv，function（data）{
// data = dimple.filterData（data，Owner，[Aperture ，Black Mesa]）
var barChart = new dimple.chart（svg，data）;
barChart.addCategoryAxis（x，[Day，Topic] ）;
barChart.addMeasureAxis（y，Tweets）;
barChart.addSeries（Topic，dimple.plot.bar）;
barChart.addLegend（65，10， 510，20，right）;
barChart.draw（）;
barChart.draw（）;
}）;
您的问题是您使用相同的全局名称 svg 以保存对两个不同图表的引用。当你的第二段代码运行时，它会覆盖你从第一段代码中得到的svg值，当 .tsv（）回调返回时，它会找到一个引用
svg1 和 svg2 就可以了。 ：使用某种命名空间管理，例如将两段代码包含在立即调用的函数中：
function（）{
//你的第一块代码在这里
}（）
function（）{
//你的第二块代码在这里
}（）
这样，您将有两个 svg 他们自己的范围
I'm making an html page with several examples of charts that I will be using. On the page I have a Dimple line graph, a pie chart, a wordcloud etc. When I try to add a second dimple graph - this time a bar graph, the first dimple line graph that I already have on the page is drawn on top of my bar graph:
My HTML file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Graphs</title>
<link rel="stylesheet" type="text/css" href="_/base.css">
<link rel="stylesheet" type="text/css" href="_/c3CSS.css">
<script type="text/javascript" src="_/d3.min.js"></script>
<script type="text/javascript" src="_/dimple.v2.1.0.min.js"></script>
<script type="text/javascript" src="_/c3.min.js"></script>
<script type="text/javascript" src="_/d3.layout.cloud.js"></script>
</head>
<body>
<div id="chartContainer">
<h1>Hot Topics Line</h1>
<script type="text/javascript" src=CurvyLine.js></script>
</div>
<h1>Hot Topics Pie</h1>
<div id="chart">
<script type="text/javascript" src=Pie.js></script>
</div>
<div id="wordCloud">
<h1>Clickable Word Cloud</h1>
<script type="text/javascript" src=WordCloud.js></script>
</div>
<div id="bar">
<h1>Clickable Word Cloud</h1>
<script type="text/javascript" src=WeekBar.js></script>
</div>
</body>
</html>
Without adding the bar chart at the end, the line graph displays properly at the top of the page above the pie chart. However, with the bar chart added, both the line and bar graph are drawn inside the "bar" div. Can anyone help with this please? Here is my line graph js file:
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("data/tweet_example.tsv", function (data) {
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Tweets");
var s = myChart.addSeries("Topic", dimple.plot.line);
s.interpolation = "cardinal";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
and here is my bar graph js file:
var svg = dimple.newSvg("#bar", 800, 410);
d3.tsv("data/tweet_example2.tsv", function (data) {
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var barChart = new dimple.chart(svg, data);
barChart.addCategoryAxis("x", ["Day", "Topic"]);
barChart.addMeasureAxis("y", "Tweets");
barChart.addSeries("Topic", dimple.plot.bar);
barChart.addLegend(65, 10, 510, 20, "right");
barChart.draw();
barChart.draw();
});
Your problem is that you are using the same global name svg to hold references to two different charts. When your second piece of code runs, it overwrites the svg value that you had from the first piece of code, and when the .tsv() callback returns, it finds a reference to the second graph.
Simplest solution: use different names for svg variable in both pieces of code: svg1 and svg2 will be fine.
Most elegant solution: use some kind of namespace management, such as wrapping both pieces of code in immediately called functions:
function() {
// your first chunk of code here
}()
function() {
// your second chunk of code here
}()
This way you will have two svg variables local to their own scopes
这篇关于D3 Dimple - 如何在同一页面上显示多个波形图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
