我是 d3 的新手，但通过试用学会了它。当我不包含任何 css 样式时，以下代码适用于数据集 (data/clusterRsult.json)。现在我想为页眉和页脚设置 css 样式；对于内容，我想在图表的左侧有一个 div，在右侧有一个 div 用于节点的详细文本。当我在前面的代码中添加 css 样式（无需任何 div 即可）时，Firefox 和 Google chrome 调试器模式给我以下错误：[18:09:55.694] TypeError: this[type] is undefined @ file: ///C:/Users/mcoyne/workspace_d3js/d3_v3/d3.v3.js:372
============================
我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Clustering Results - Works</title>
<link href="NSFStyles/nsfstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="d3_v3/d3.js"></script>
<script type="text/javascript" src="d3_v3/lib/colorbrewer/colorbrewer.js"></script>
<script type="text/javascript" scr="d3_v3/src/layout/layout.js"></script>
<script type="text/javascript" scr="d3_v3/src/geom/geom.js"></script>
<link href="css/nsfstyle.css" rel="stylesheet" type="text/css" />
<link href="css/csEoSVisContent.css" rel="stylesheet" type="text/css"/>
<style>
p {
-webkit-margin-after: 0em;
-webkit-margin-before: 0em;
margin-bottom: 0em;
margin-top: 5em;
}
#h_emphasis01 {
font-weight: bold;
}
</style>
</head>
<body>
<div class="csnsfheader"></div>
<div style="text-align: right; padding-right: 1em; font-family: Verdana; font-size: 60%; top:auto;vertical-align: top; font-weight: bold; padding-top: 1px" id="Help" align="right">
<a style="text-decoration: none" href="helpEos.html"
target="_blank">HELP | </a><a style="text-decoration: none" title="Send us an email"href="mailto:xyz@abc.gov">CONTACT |</a>
</div>
<div class = "svg">
<div class="csnsfbody.svg.containerLeft" id="clusterLeftPanel"> </div>
<div class="csnsfbody.svg.containerRight" id="clusterRightPanel"> </div>
<script type="text/javascript" src="d3_v3/d3.v3.js"></script>
<!--script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script-->
<script>
var width = 620,
height = width,
radius = Math.min(width, height) /2,
node,
link,
root,
x = d3.scale.linear().range([0, 2 * Math.PI]),
y = d3.scale.pow().exponent(1.3).domain([0,1]).range([0, radius]);
// y = d3.scale.linear().range([0, radius]),
padding = 5,
duration = 1000,
color = d3.scale.category20c();
var colorScaleTop = d3.scale.ordinal().domain([101, 1000.0]).range(colorbrewer.Dark2[5]);
var colorScaleMiddle = d3.scale.ordinal().domain([1, 1000.0]).range(colorbrewer.Pastel1[6]);
var colorScaleLeaf = d3.scale.ordinal().domain([1]).range(colorbrewer.Set2[5]);
// set up the left section of the screen for the graph
var vis = d3.select("body")
.append ("csnsfbody.svg.containerLeft")
.attr("class", "csnsfbody.svg.containerLeft")
.style("width", width + "px")
.style("height", height + "px")
.append("svg:svg")
.attr("width", width + padding * 2 )
.attr("height", height + padding * 2)
.append("svg:g")
.attr("transform", "translate(" + [radius + padding, radius + padding] + ")")
;
// set up the right section of the screen for text displaying
var clusterDetails = d3.select("body")
.append("csnsfbody.svg.containerRight")
.attr("class", "csnsfbody.svg.containerRight")
.style("width", width + "px")
.style("height", height + "px")
.style("margin-left", "100px")
.style("background","#F8FBEF")
.style("position", "absolute")
;
// *** Error encounter on this line
// ***
d3.json("data/clusterResult.json", function(error, json) {
if (error) return console.log("there was an error loading the data: " + error);
var force = d3.layout.force()
.size([width, height])
.charge(function(d) { return getCharge(d);})
.linkDistance(function(d) { return getLinkDistance(d); })
.on("tick", tick)
.on("mouseover",mouseover)
.on("mouseout", mouseout)
;
// successfully load data from data.json
console.log("there are " + json.size + " nodes in my dataset");
console.log("there are " + json.children.length + " categories in my dataset");
root = json;
update();
});
function update() {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes),
total = nodes.length || 1;
console.log("nodes.length = " + nodes.length);
console.log("total=" + total);
// Restart the force layout.
force
.gravity(Math.atan(total / 50) / Math.PI * 0.4)
.nodes(nodes)
.links(links)
.start();
// Update the links
// link = vis.selectAll("line.link")
// .data(force.links())
// .attr("class", "link")
link = svg.selectAll('.link')
.data( force.links() )
.enter().append('line')
.attr('class', 'link')
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
;
// Enter any new links.
link.enter().insert("svg:line", ".node")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
// Exit any old links.
link.exit().remove();
// Update the nodes
node = vis.selectAll("circle.node")
.data(force.nodes())
.classed("collapsed", function(d) { return d._children ? 1 : 0; })
.attr("class", "node")
.style("fill", function(d) { return color(d);} )
;
node.select ("circle")
.style("fill", function(d) { return color(d);} );
// Enter any new nodes.
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.call(force.drag)
;
nodeEnter.append("svg:circle")
.attr("class", "node")
.classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; })
.attr("r", function(d) {return getRadius(d); })
.attr("fill", function(d) { return color(d); })
.call(force.drag)
//.on("click",click) // This is NOT working
;
nodeEnter.append("svg:text")
.attr("text-anchor", "middle")
.attr("dy", ".35em")
.style("font-size", function (d) { return d.children ? "12px" : "8px"; })
.style("font-weight", function (d) { return d.children ? "600" : "200"; })
.text(function(d) {return d.children ? (d.name + " (" + d.size + ")") : ""; });
// Exit any old nodes
node.exit().remove();
// reselect for update
link = vis.selectAll("line.link");
node = vis.selectAll("g.node");
force.on("tick", tick);
} // end update function
function tick() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) {
return "translate(" + Math.max(5, Math.min(width - 5, d.x)) + "," + Math.max(5, Math.min(height - 5, d.y)) + ")";
});
}
// Color leaf nodes orange, and packages white or blue.
function color(d) {
//if (d.type=="root") {return colorScaleTop(d.children);}
//if (d.type == "label") {return colorScaleMiddle (d.children);}
if (d.type == "root" ){return "#FFFF33"; }
if (d.type == "label") {
if (d.size <= 50) { return "#7FBF7B"; } // good color 66C2A5, cute green A1D76A
if (d.size > 50 && d.size <= 100) { return "#FC8D62"; }
if (d.size > 100) { return "#E9A3C9"; }
}
if (d.type == "leaf") {return "#2C7FB8"; } // lavender #BEAED4
// light green ADDD8E
}
function getRadius (d) {
if (d.type == "root") {return 20;}
if (d.type == "label") {return 12; }
if (d.type == "leaf") {return 2;}
}
function getLinkDistance (d) {
if (d.target.type == "label") {return 8; }
if (d.target.type == "leaf") {return 3;}
}
function getCharge (d) {
if (d.type == "root") {return -300; }
if (d.type == "label") {return -600; }
if (d.type == "leaf") {return -40;}
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();
}
function mouseover (d) {
if (d.type == "leaf") {
this.text.attr('transform', 'translate(' + d.x + ',' + (d.y - 5 - (d.children ? 3.5 : Math.sqrt(d.size) / 2)) + ')')
.text(d.name)
//.style('display', null)
;
}
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!nodes.id) nodes.id = ++i;
nodes.push(node);
}
recurse(root);
return nodes;
}
function mouseover(d)
{
console.log("mouseouver <" + d.name + ">");
if (d.type == "root") {
console.log("mouseouver, root <" + d.name + ">");
clusterDetais.append("p")
.style("font-weight", 600)
.text(d.name);
}
if (d.type== "label") {
console.log("mouseouver, label <" + d.name + ">");
clusterDetails.append("p")
.style("font-weight", 600)
.text("Cluster Name: " + d.name + " (" + d.size + ")")
;
var myChildren = new Array;
myChildren = getChildrenOf(d, myChildren);
for (var i = 0; i < myChildren.length; i++) {
if (myChildren[i].type === "label" && myChildren[i].children) {
clusterDetails.append("p")
.style("font-weight", 600)
.text ("Sub-cluster name: " + myChildren[i].name + " (" + myChildren[i].size + ")")
;
}
else { clusterDetails.append("p")
.text(myChildren[i].name);
}
} // end for
}
if(d.type=="leaf" ){
clusterDetails.append("p")
.text ("Proposal id: " + d.name)
.text ("Title: " + "TBA")
.text ("PI/CoPi: " + "TBA")
;
}
} // end mouseover
//mouseout function which removes the values and replaces them with a blank space
function mouseout(d)
{
clusterDetails.html(' ');
}
</script>
</div>
<!-- ====================================================================== -->
<!-- Footer -->
<!-- ====================================================================== -->
<div class="csnsffooter" >
<!-- Add footer here -->
<span></span>
</body>
</html>