D3 Dimple - 如何在同一页面上显示多个酒窝图表？

Question

我正在制作一个 html 页面，其中包含我将使用的几个图表示例。在页面上，我有一个酒窝线图、一个饼图、一个文字云等。当我尝试添加第二个酒窝图时——这次是一个条形图，我已经在页面上的第一个酒窝线图被绘制在顶部我的条形图：

我的 HTML 文件如下所示：

<!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>

如果不在末尾添加条形图，折线图会正确显示在饼图上方的页面顶部。但是，添加条形图后，折线图和条形图都绘制在 "bar" 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();
});

Answer 1

您的问题是您使用相同的全局名称 svg 来保存对两个不同图表的引用。当您的第二段代码运行时，它会覆盖您从第一段代码中获得的 svg 值，并且当 .tsv() 回调 returns 时，它会找到对第二个图形的引用。

最简单的解决方案：在两段代码中对 svg 变量使用不同的名称：svg1 和 svg2 都可以。

最优雅的解决方案：使用某种名称空间管理，例如将两段代码包装在立即调用的函数中：

function() {
// your first chunk of code here
}()

function() {
// your second chunk of code here
}()

这样你将有两个 svg 局部变量到它们自己的范围

D3 Dimple - 如何在同一页面上显示多个酒窝图表？

D3 Dimple - How to show multiple dimple charts on same page?

charts

d3.js

dimple.js