无法呈现简单的 HTML 页面示例

Question

我在 http://graphalchemist.github.io/Alchemy/#/examples

看到了一个例子

我正在使用 'basic graph' 示例

我想将示例复制到我自己的本地计算机上。

我创建了一个包含两个文件的目录：trial.html 和 charlize.json，并复制了代码。

我做的唯一改变是切换

dataSource: 'data/charlize.json',

到

dataSource: 'charlize.json', ( I also tried ./charlize.json)

当我打开 trial.html 时，我没有得到网络图。我得到一个空白的白色 HTML 页面。我看不出我必须做些什么。

Alchemy.js 说我不需要安装任何库，头部有一个 link 到 CSS 样式，我不知道还有什么我需要。

更新（工作代码）：

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.css" />
</head>
<body>
  <div class="alchemy" id="alchemy"></div>

  <script src="http://cdn.graphalchemist.com/alchemy.min.js"></script>

  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>


  <script type="text/javascript">
        var config = {
            dataSource: './charlize.json',
            };

        alchemy = new Alchemy(config)
    </script>
  </body>
</html>

Answer 1

我从未使用过 Alchemy，但我将他们的演示代码放在一起，看起来它需要他们的 vendor.js 和 d3 库。这是一个带有示例代码的演示。

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.css" />
</head>


<body>
  <div class="alchemy" id="alchemy"></div>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>
  <script type="text/javascript">
    var json = {
      comment: "Charlize Theron's 'ego' network as GraphJSON",
      nodes: [
        {
          caption: "Screen Actors Guild Award for Outstanding Performance by a Female Actor in a Miniseries or Television Movie",
          type: "award",
          id: 595472
        },
        {
          caption: "Children of the Corn III: Urban Harvest",
          type: "movie",
          id: 626470
        },
        {
          caption: "Sleepwalking",
          type: "movie",
          id: 795744
        },
        {
          caption: "That Thing You Do!",
          type: "movie",
          id: 692946
        },
        {
          caption: "Trapped",
          type: "movie",
          id: 689794
        },
        {
          caption: "Head in the Clouds",
          type: "movie",
          id: 709577
        },
        {
          caption: "Waking Up in Reno",
          type: "movie",
          id: 635905
        },
        {
          caption: "Battle in Seattle",
          type: "movie",
          id: 734583
        },
        {
          caption: "Mighty Joe Young",
          type: "movie",
          id: 662595
        },
        {
          caption: "Academy Award for Actress in a Leading Role",
          type: "award",
          id: 593781
        },
        {
          caption: "The Devil's Advocate",
          type: "movie",
          id: 740763
        },
        {
          caption: "Screen Actors Guild Award for Outstanding Performance by a Cast in a Motion Picture",
          type: "award",
          id: 595440
        },
        {
          caption: "Silver Bear for Best Actress",
          type: "award",
          id: 601507
        },
        {
          caption: "The Curse of the Jade Scorpion",
          type: "movie",
          id: 649461
        },
        {
          caption: "MTV Movie Award for Best Female Performance",
          type: "award",
          id: 595074
        },
        {
          caption: "15 Minutes",
          type: "movie",
          id: 634248
        },
        {
          caption: "The Burning Plain",
          type: "movie",
          id: 670704
        },
        {
          caption: "The Life and Death of Peter Sellers",
          type: "movie",
          id: 794982
        },
        {
          caption: "Prometheus",
          type: "movie",
          id: 608746
        },
        {
          caption: "Teen Choice Award for Choice Summer Movie Star: Female",
          type: "award",
          id: 599909
        },
        {
          caption: "Chicago Film Critics Association Award for Best Actress",
          type: "award",
          id: 623686
        },
        {
          caption: "Golden Globe Award for Best Supporting Actress - Series, Miniseries or Television Film",
          type: "award",
          id: 598027
        },
        {
          caption: "Golden Globe Award for Best Actress - Musical or Comedy Film",
          type: "award",
          id: 595206
        },
        {
          caption: "Mad Max: Fury Road",
          type: "movie",
          id: 804341
        },
        {
          caption: "In the Valley of Elah",
          type: "movie",
          id: 621675
        },
        {
          caption: "Screen Actors Guild Award for Outstanding Performance by a Female Actor in a Leading Role",
          type: "award",
          id: 593954
        },
        {
          caption: "Golden Raspberry Award for Worst Actress",
          type: "award",
          id: 594134
        },
        {
          caption: "East of Havana",
          type: "movie",
          id: 609415
        },
        {
          caption: "The Road",
          type: "movie",
          id: 627715
        },
        {
          caption: "Golden Globe Award for Best Actress - Drama Film",
          type: "award",
          id: 593776
        },
        {
          caption: "Charles Jacobus Theron",
          type: "person",
          id: 314008
        },
        {
          caption: "Jackson Theron",
          type: "person",
          id: 314009
        },
        {
          caption: "Primetime Emmy Award for Outstanding Supporting Actress in a Miniseries or a Movie",
          type: "award",
          id: 595684
        },
        {
          caption: "The Cider House Rules",
          type: "movie",
          id: 801237
        },
        {
          caption: "The Astronaut's Wife",
          type: "movie",
          id: 657006
        },
        {
          caption: "Broadcast Film Critics Association Award for Best Actress",
          type: "award",
          id: 601849
        },
        {
          caption: "Hancock",
          type: "movie",
          id: 652245
        },
        {
          caption: "Charlize Theron",
          root: true,
          id: 314003
        },
        {
          caption: "Stuart Townsend",
          type: "person",
          id: 314004
        },
        {
          caption: "Stephan Jenkins",
          type: "person",
          id: 314005
        },
        {
          caption: "Benoni, Gauteng",
          type: "person",
          id: 314006
        },
        {
          caption: "Gerda Jacoba Aletta Maritz",
          type: "person",
          id: 314007
        },
        {
          caption: "Æon Flux",
          type: "movie",
          id: 663286
        },
        {
          caption: "Snow White and the Huntsman",
          type: "movie",
          id: 599907
        },
        {
          caption: "Young Adult",
          type: "movie",
          id: 661733
        },
        {
          caption: "Reindeer Games",
          type: "movie",
          id: 761000
        },
        {
          caption: "Monster",
          type: "movie",
          id: 729778
        },
        {
          caption: "The Legend of Bagger Vance",
          type: "movie",
          id: 804616
        },
        {
          caption: "Teen Choice Award for Choice Hissy Fit: Film",
          type: "award",
          id: 599908
        },
        {
          caption: "The Yards",
          type: "movie",
          id: 781638
        },
        {
          caption: "MTV Movie Award for Best Kiss",
          type: "award",
          id: 595095
        },
        {
          caption: "Celebrity",
          type: "movie",
          id: 611629
        },
        {
          caption: "Astro Boy",
          type: "movie",
          id: 818608
        },
        {
          caption: "North Country",
          type: "movie",
          id: 784437
        },
        {
          caption: "2 Days in the Valley",
          type: "movie",
          id: 615556
        },
        {
          caption: "Satellite Award for Best Actress – Motion Picture",
          type: "award",
          id: 595704
        },
        {
          caption: "Trial and Error",
          type: "movie",
          id: 799574
        },
        {
          caption: "National Society of Film Critics Award for Best Actress",
          type: "award",
          id: 595702
        },
        {
          caption: "Independent Spirit Award for Best Female Lead",
          type: "award",
          id: 595703
        },
        {
          caption: "Two Eyes Staring",
          type: "movie",
          id: 788889
        },
        {
          caption: "Sweet November",
          type: "movie",
          id: 811358
        },
        {
          caption: "Teen Choice Movie Award: Villain",
          type: "award",
          id: 595082
        },
        {
          caption: "Satellite Award for Best Supporting Actress – Drama",
          type: "award",
          id: 602151
        },
        {
          caption: "San Francisco Film Critics Circle Award for Best Actress",
          type: "award",
          id: 669827
        },
        {
          caption: "Independent Spirit Award for Best First Feature",
          type: "award",
          id: 599387
        },
        {
          caption: "The Italian Job",
          type: "movie",
          id: 817380
        },
        {
          caption: "Hollywood Confidential",
          type: "movie",
          id: 711550
        },
        {
          caption: "Men of Honor",
          type: "movie",
          id: 682763
        },
        {
          caption: "BAFTA Award for Best Actress in a Leading Role",
          type: "award",
          id: 594478
        }
      ],
      edges: [
        {
          source: 314003,
          target: 621675,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 818608,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 601849,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 649461,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 669827,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 608746,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 593954,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 595702,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 601849,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 595095,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 729778,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595703,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 811358,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595472,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 661733,
          caption: "PRODUCED"
        },
        {
          source: 314003,
          target: 784437,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 634248,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 662595,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 804616,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595703,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 626470,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 599387,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 599908,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 682763,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595702,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 788889,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 657006,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 795744,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 593781,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 594478,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 594134,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 595074,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 692946,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 740763,
          caption: "ACTED_IN"
        },
        {
          source: 314005,
          target: 314003,
          caption: "PARTNER_OF"
        },
        {
          source: 314003,
          target: 711550,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595440,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 801237,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 599907,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 761000,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 781638,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 670704,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 609415,
          caption: "PRODUCED"
        },
        {
          source: 314003,
          target: 314009,
          caption: "PARENT_OF"
        },
        {
          source: 314003,
          target: 652245,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 661733,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 602151,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 635905,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 799574,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 593781,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 817380,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 611629,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 729778,
          caption: "PRODUCED"
        },
        {
          source: 314003,
          target: 709577,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 804341,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 627715,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 794982,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 623686,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 595082,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 689794,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 788889,
          caption: "PRODUCED"
        },
        {
          source: 314007,
          target: 314003,
          caption: "PARENT_OF"
        },
        {
          source: 314003,
          target: 593776,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 734583,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 598027,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 601507,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 599909,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 314004,
          caption: "PARTNER_OF"
        },
        {
          source: 314003,
          target: 663286,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 314006,
          caption: "BORN_AT"
        },
        {
          source: 314003,
          target: 615556,
          caption: "ACTED_IN"
        },
        {
          source: 314004,
          target: 314003,
          caption: "PARTNER_OF"
        },
        {
          source: 314008,
          target: 314003,
          caption: "PARENT_OF"
        },
        {
          source: 314003,
          target: 314005,
          caption: "PARTNER_OF"
        },
        {
          source: 314003,
          target: 795744,
          caption: "PRODUCED"
        },
        {
          source: 314003,
          target: 595704,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 670704,
          caption: "EXEC_PRODUCED"
        },
        {
          source: 314003,
          target: 593954,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 595206,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 593776,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 595704,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 595684,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 599387,
          caption: "NOMINATED"
        }
      ]
    };
    var config = {
      dataSource: json
    };
    
    alchemy = new Alchemy(config);
  </script>
</body>

</html>

无法呈现简单的 HTML 页面示例

Can't render a simple HTML page example

html

javascript

json

alchemy.js