问题
I saw an example at http://graphalchemist.github.io/Alchemy/#/examples
I am working with 'basic graph' example
I wanted to copy the example on my own local computer.
I made a directory with two files : trial.html and charlize.json , and copied the code.
Only change I made was switching
dataSource: 'data/charlize.json',
to
dataSource: 'charlize.json', ( I also tried ./charlize.json)
When I open trial.html , I don't get the network graph. I get a blank white HTML page . I don't see what I have to do different.
Alchemy.js says that I don't need to install any libraries, there is a link to a CSS style in the head , and I don't know what else I would need.
UPDATE (working code) :
<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>
回答1:
I've never used Alchemy, but I put their demo code together and looks like it requires their vendor.js and the d3 library. Here's a demo with their example code.
<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>来源：https://stackoverflow.com/questions/43722137/cant-render-a-simple-html-page-example