27
rated 0 times
[
29]
[
2]
/ answers: 1 / hits: 32813
/ 12 Years ago, wed, december 5, 2012, 12:00:00
I am trying out d3 as a tool for representing biological data.
I am trying to open the following example in my chrome browser so that I can understand how it works. Unfortunately I get the following error Uncaught TypeError: Cannot read property 'children' of undefined .
If you click the link, the source code for both the .html file and the .json file are displayed below the output of the visualization. Clearly the visualization is working on the above page. I'm not sure what I could be doing wrong.
I have copied both the index.html file and the flare.json file to a directory on a web server. If I tried to load it from a local file I got another error: XMLHttpRequest cannot load file:///C:/Users/(..omitted..)/flare.json. Cross origin requests are only supported for HTTP.
The flare.json file indeed can be loaded from the webserver (I can see its text content). It contains the tree data I am trying to graph.
Clearly the flare.json file begins as follows:
{
name: flare,
children: [
...
Unfortunately d3.json is having trouble parsing this information...
If it helps, here is the .html file I am trying to open in Chrome:
<!DOCTYPE html>
<html>
<head>
<title>heirarchical graph</title>
<meta charset=utf-8>
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
<script type=text/javascript
src=https://raw.github.com/mbostock/d3/master/d3.v2.min.js>
</script>
</head>
<body>
<script>
var diameter = 960;
var tree = d3.layout.tree()
.size([360, diameter / 2 - 120])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
var svg = d3.select(body).append(svg)
.attr(width, diameter)
.attr(height, diameter - 150)
.append(g)
.attr(transform, translate( + diameter / 2 + , + diameter / 2 + ));
d3.json(flare.json, function(error, root) {
var nodes = tree.nodes(root),
links = tree.links(nodes);
var link = svg.selectAll(.link)
.data(links)
.enter().append(path)
.attr(class, link)
.attr(d, diagonal);
var node = svg.selectAll(.node)
.data(nodes)
.enter().append(g)
.attr(class, node)
.attr(transform, function(d) { return rotate( + (d.x - 90) + )translate( + d.y + ); })
node.append(circle)
.attr(r, 4.5);
node.append(text)
.attr(dy, .31em)
.attr(text-anchor, function(d) { return d.x < 180 ? start : end; })
.attr(transform, function(d) { return d.x < 180 ? translate(8) : rotate(180)translate(-8); })
.text(function(d) { return d.name; });
});
d3.select(self.frameElement).style(height, diameter - 150 + px);
</script>
</body>
</html>
And, here is the flare.json file:
{
name: flare,
children: [
{
name: analytics,
children: [
{
name: cluster,
children: [
{name: AgglomerativeCluster, size: 3938},
{name: CommunityStructure, size: 3812},
{name: HierarchicalCluster, size: 6714},
{name: MergeEdge, size: 743}
]
},
{
name: graph,
children: [
{name: BetweennessCentrality, size: 3534},
{name: LinkDistance, size: 5731},
{name: MaxFlowMinCut, size: 7840},
{name: ShortestPaths, size: 5914},
{name: SpanningTree, size: 3416}
]
},
{
name: optimization,
children: [
{name: AspectRatioBanker, size: 7074}
]
}
]
},
{
name: animate,
children: [
{name: Easing, size: 17010},
{name: FunctionSequence, size: 5842},
{
name: interpolate,
children: [
{name: ArrayInterpolator, size: 1983},
{name: ColorInterpolator, size: 2047},
{name: DateInterpolator, size: 1375},
{name: Interpolator, size: 8746},
{name: MatrixInterpolator, size: 2202},
{name: NumberInterpolator, size: 1382},
{name: ObjectInterpolator, size: 1629},
{name: PointInterpolator, size: 1675},
{name: RectangleInterpolator, size: 2042}
]
},
{name: ISchedulable, size: 1041},
{name: Parallel, size: 5176},
{name: Pause, size: 449},
{name: Scheduler, size: 5593},
{name: Sequence, size: 5534},
{name: Transition, size: 9201},
{name: Transitioner, size: 19975},
{name: TransitionEvent, size: 1116},
{name: Tween, size: 6006}
]
},
{
name: data,
children: [
{
name: converters,
children: [
{name: Converters, size: 721},
{name: DelimitedTextConverter, size: 4294},
{name: GraphMLConverter, size: 9800},
{name: IDataConverter, size: 1314},
{name: JSONConverter, size: 2220}
]
},
{name: DataField, size: 1759},
{name: DataSchema, size: 2165},
{name: DataSet, size: 586},
{name: DataSource, size: 3331},
{name: DataTable, size: 772},
{name: DataUtil, size: 3322}
]
},
{
name: display,
children: [
{name: DirtySprite, size: 8833},
{name: LineSprite, size: 1732},
{name: RectSprite, size: 3623},
{name: TextSprite, size: 10066}
]
},
{
name: flex,
children: [
{name: FlareVis, size: 4116}
]
},
{
name: physics,
children: [
{name: DragForce, size: 1082},
{name: GravityForce, size: 1336},
{name: IForce, size: 319},
{name: NBodyForce, size: 10498},
{name: Particle, size: 2822},
{name: Simulation, size: 9983},
{name: Spring, size: 2213},
{name: SpringForce, size: 1681}
]
},
{
name: query,
children: [
{name: AggregateExpression, size: 1616},
{name: And, size: 1027},
{name: Arithmetic, size: 3891},
{name: Average, size: 891},
{name: BinaryExpression, size: 2893},
{name: Comparison, size: 5103},
{name: CompositeExpression, size: 3677},
{name: Count, size: 781},
{name: DateUtil, size: 4141},
{name: Distinct, size: 933},
{name: Expression, size: 5130},
{name: ExpressionIterator, size: 3617},
{name: Fn, size: 3240},
{name: If, size: 2732},
{name: IsA, size: 2039},
{name: Literal, size: 1214},
{name: Match, size: 3748},
{name: Maximum, size: 843},
{
name: methods,
children: [
{name: add, size: 593},
{name: and, size: 330},
{name: average, size: 287},
{name: count, size: 277},
{name: distinct, size: 292},
{name: div, size: 595},
{name: eq, size: 594},
{name: fn, size: 460},
{name: gt, size: 603},
{name: gte, size: 625},
{name: iff, size: 748},
{name: isa, size: 461},
{name: lt, size: 597},
{name: lte, size: 619},
{name: max, size: 283},
{name: min, size: 283},
{name: mod, size: 591},
{name: mul, size: 603},
{name: neq, size: 599},
{name: not, size: 386},
{name: or, size: 323},
{name: orderby, size: 307},
{name: range, size: 772},
{name: select, size: 296},
{name: stddev, size: 363},
{name: sub, size: 600},
{name: sum, size: 280},
{name: update, size: 307},
{name: variance, size: 335},
{name: where, size: 299},
{name: xor, size: 354},
{name: _, size: 264}
]
},
{name: Minimum, size: 843},
{name: Not, size: 1554},
{name: Or, size: 970},
{name: Query, size: 13896},
{name: Range, size: 1594},
{name: StringUtil, size: 4130},
{name: Sum, size: 791},
{name: Variable, size: 1124},
{name: Variance, size: 1876},
{name: Xor, size: 1101}
]
},
{
name: scale,
children: [
{name: IScaleMap, size: 2105},
{name: LinearScale, size: 1316},
{name: LogScale, size: 3151},
{name: OrdinalScale, size: 3770},
{name: QuantileScale, size: 2435},
{name: QuantitativeScale, size: 4839},
{name: RootScale, size: 1756},
{name: Scale, size: 4268},
{name: ScaleType, size: 1821},
{name: TimeScale, size: 5833}
]
},
{
name: util,
children: [
{name: Arrays, size: 8258},
{name: Colors, size: 10001},
{name: Dates, size: 8217},
{name: Displays, size: 12555},
{name: Filter, size: 2324},
{name: Geometry, size: 10993},
{
name: heap,
children: [
{name: FibonacciHeap, size: 9354},
{name: HeapNode, size: 1233}
]
},
{name: IEvaluable, size: 335},
{name: IPredicate, size: 383},
{name: IValueProxy, size: 874},
{
name: math,
children: [
{name: DenseMatrix, size: 3165},
{name: IMatrix, size: 2815},
{name: SparseMatrix, size: 3366}
]
},
{name: Maths, size: 17705},
{name: Orientation, size: 1486},
{
name: palette,
children: [
{name: ColorPalette, size: 6367},
{name: Palette, size: 1229},
{name: ShapePalette, size: 2059},
{name: SizePalette, size: 2291}
]
},
{name: Property, size: 5559},
{name: Shapes, size: 19118},
{name: Sort, size: 6887},
{name: Stats, size: 6557},
{name: Strings, size: 22026}
]
},
{
name: vis,
children: [
{
name: axis,
children: [
{name: Axes, size: 1302},
{name: Axis, size: 24593},
{name: AxisGridLine, size: 652},
{name: AxisLabel, size: 636},
{name: CartesianAxes, size: 6703}
]
},
{
name: controls,
children: [
{name: AnchorControl, size: 2138},
{name: ClickControl, size: 3824},
{name: Control, size: 1353},
{name: ControlList, size: 4665},
{name: DragControl, size: 2649},
{name: ExpandControl, size: 2832},
{name: HoverControl, size: 4896},
{name: IControl, size: 763},
{name: PanZoomControl, size: 5222},
{name: SelectionControl, size: 7862},
{name: TooltipControl, size: 8435}
]
},
{
name: data,
children: [
{name: Data, size: 20544},
{name: DataList, size: 19788},
{name: DataSprite, size: 10349},
{name: EdgeSprite, size: 3301},
{name: NodeSprite, size: 19382},
{
name: render,
children: [
{name: ArrowType, size: 698},
{name: EdgeRenderer, size: 5569},
{name: IRenderer, size: 353},
{name: ShapeRenderer, size: 2247}
]
},
{name: ScaleBinding, size: 11275},
{name: Tree, size: 7147},
{name: TreeBuilder, size: 9930}
]
},
{
name: events,
children: [
{name: DataEvent, size: 2313},
{name: SelectionEvent, size: 1880},
{name: TooltipEvent, size: 1701},
{name: VisualizationEvent, size: 1117}
]
},
{
name: legend,
children: [
{name: Legend, size: 20859},
{name: LegendItem, size: 4614},
{name: LegendRange, size: 10530}
]
},
{
name: operator,
children: [
{
name: distortion,
children: [
{name: BifocalDistortion, size: 4461},
{name: Distortion, size: 6314},
{name: FisheyeDistortion, size: 3444}
]
},
{
name: encoder,
children: [
{name: ColorEncoder, size: 3179},
{name: Encoder, size: 4060},
{name: PropertyEncoder, size: 4138},
{name: ShapeEncoder, size: 1690},
{name: SizeEncoder, size: 1830}
]
},
{
name: filter,
children: [
{name: FisheyeTreeFilter, size: 5219},
{name: GraphDistanceFilter, size: 3165},
{name: VisibilityFilter, size: 3509}
]
},
{name: IOperator, size: 1286},
{
name: label,
children: [
{name: Labeler, size: 9956},
{name: RadialLabeler, size: 3899},
{name: StackedAreaLabeler, size: 3202}
]
},
{
name: layout,
children: [
{name: AxisLayout, size: 6725},
{name: BundledEdgeRouter, size: 3727},
{name: CircleLayout, size: 9317},
{name: CirclePackingLayout, size: 12003},
{name: DendrogramLayout, size: 4853},
{name: ForceDirectedLayout, size: 8411},
{name: IcicleTreeLayout, size: 4864},
{name: IndentedTreeLayout, size: 3174},
{name: Layout, size: 7881},
{name: NodeLinkTreeLayout, size: 12870},
{name: PieLayout, size: 2728},
{name: RadialTreeLayout, size: 12348},
{name: RandomLayout, size: 870},
{name: StackedAreaLayout, size: 9121},
{name: TreeMapLayout, size: 9191}
]
},
{name: Operator, size: 2490},
{name: OperatorList, size: 5248},
{name: OperatorSequence, size: 4190},
{name: OperatorSwitch, size: 2581},
{name: SortOperator, size: 2023}
]
},
{name: Visualization, size: 16540}
]
}
]
}
More From » html
