Question

我正在创建一个html页面，其中包含我将使用的几个图表示例。在页面上我有一个Dimple线图，一个饼图，一个wordcloud等。当我尝试添加第二个凹坑图 - 这次是条形图时，我在页面上已经有的第一个凹陷线图被绘制在顶部我的条形图： enter image description here

我的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>

如果不在末尾添加条形图，则折线图上方的页面顶部会正确显示折线图。但是，添加条形图后，线条和条形图都会在＆＃34; bar＆＃34;中绘制。 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()回调返回时，它会找到对第二段代码的引用。

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

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

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

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

通过这种方式，您将拥有两个svg个变量，这些变量位于自己的范围

D3 Dimple - 如何在同一页面上显示多个凹坑图？

1 个答案: