d3.js气泡图无效Firefox浏览器（错误：未定义类）
我创建了带有热色的简单d3.js气泡图（asp.net页面），而打开firefox浏览器却无法正常工作。我收到错误未定义类。在体D3.js被引用。请让我如何解决这个问题。
注意：同一页面在Chrome / IE / Safari浏览器中有效。只有Firefox没有工作。
源代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.d3-tip {
line-height: 1;
padding: 4px 10px;
background: whitesmoke;
color: black;
border-radius: 5px;
border-style: solid;
border-width: 1px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12px;
text-align: left;
}
/* Creates a small triangle extender for the tooltip*/
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: black;
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
</head>
<body onload="PopulateBubbleChart()">
<script src="../D3js/d3.min.js" type="text/javascript"></script>
<script src="../D3js/d3.tip.v0.6.3.js" type="text/javascript"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PopulateBubbleChart() {
var json = { "name": "flare", "children": [{ "name": "US-AL", "children": [{ "name": "AL", "size": 106463, "mcperpatient": 9.11, "displayname": "Alabama" }] }, { "name": "US-AK", "children": [{ "name": "AK", "size": 14693, "mcperpatient": 12.85, "displayname": "Alaska" }] }, { "name": "US-AZ", "children": [{ "name": "AZ", "size": 137362, "mcperpatient": 9.48, "displayname": "Arizona" }] }, { "name": "US-AR", "children": [{ "name": "AR", "size": 85795, "mcperpatient": 10.27, "displayname": "Arkansas" }] }, { "name": "US-CA", "children": [{ "name": "CA", "size": 444432, "mcperpatient": 11.72, "displayname": "California" }] }, { "name": "US-CO", "children": [{ "name": "CO", "size": 90822, "mcperpatient": 9.36, "displayname": "Colorado" }] }, { "name": "US-CT", "children": [{ "name": "CT", "size": 51360, "mcperpatient": 11.1, "displayname": "Connecticut" }] }, { "name": "US-DE", "children": [{ "name": "DE", "size": 14676, "mcperpatient": 10.08, "displayname": "Delaware" }] }, { "name": "US-DC", "children": [{ "name": "DC", "size": 8800, "mcperpatient": 23.2, "displayname": "District of Columbia" }] }, { "name": "US-FL", "children": [{ "name": "FL", "size": 465279, "mcperpatient": 9.21, "displayname": "Florida" }] }, { "name": "US-GA", "children": [{ "name": "GA", "size": 167445, "mcperpatient": 8.4, "displayname": "Georgia" }] }, { "name": "US-HI", "children": [{ "name": "HI", "size": 23824, "mcperpatient": 10.21, "displayname": "Hawaii" }] }, { "name": "US-ID", "children": [{ "name": "ID", "size": 39928, "mcperpatient": 8.33, "displayname": "Idaho" }] }, { "name": "US-IL", "children": [{ "name": "IL", "size": 173998, "mcperpatient": 10.92, "displayname": "Illinois" }] }, { "name": "US-IN", "children": [{ "name": "IN", "size": 122936, "mcperpatient": 9.13, "displayname": "Indiana" }] }, { "name": "US-IA", "children": [{ "name": "IA", "size": 71758, "mcperpatient": 8.09, "displayname": "Iowa" }] }, { "name": "US-KS", "children": [{ "name": "KS", "size": 58097, "mcperpatient": 9.64, "displayname": "Kansas" }] }, { "name": "US-KY", "children": [{ "name": "KY", "size": 101096, "mcperpatient": 9.28, "displayname": "Kentucky" }] }, { "name": "US-LA", "children": [{ "name": "LA", "size": 76489, "mcperpatient": 9.56, "displayname": "Louisiana" }] }, { "name": "US-ME", "children": [{ "name": "ME", "size": 39358, "mcperpatient": 8.52, "displayname": "Maine" }] }, { "name": "US-MD", "children": [{ "name": "MD", "size": 53461, "mcperpatient": 10.43, "displayname": "Maryland" }] }, { "name": "US-MA", "children": [{ "name": "MA", "size": 84345, "mcperpatient": 13.02, "displayname": "Massachusetts" }] }, { "name": "US-MI", "children": [{ "name": "MI", "size": 142558, "mcperpatient": 9.46, "displayname": "Michigan" }] }, { "name": "US-MN", "children": [{ "name": "MN", "size": 108274, "mcperpatient": 9.69, "displayname": "Minnesota" }] }, { "name": "US-MS", "children": [{ "name": "MS", "size": 69676, "mcperpatient": 9.49, "displayname": "Mississippi" }] }, { "name": "US-MO", "children": [{ "name": "MO", "size": 109455, "mcperpatient": 8.59, "displayname": "Missouri" }] }, { "name": "US-MT", "children": [{ "name": "MT", "size": 35189, "mcperpatient": 8.6, "displayname": "Montana" }] }, { "name": "US-NE", "children": [{ "name": "NE", "size": 47275, "mcperpatient": 8.74, "displayname": "Nebraska" }] }, { "name": "US-NV", "children": [{ "name": "NV", "size": 65443, "mcperpatient": 12.04, "displayname": "Nevada" }] }, { "name": "US-NH", "children": [{ "name": "NH", "size": 28604, "mcperpatient": 9.73, "displayname": "New Hampshire" }] }, { "name": "US-NJ", "children": [{ "name": "NJ", "size": 77179, "mcperpatient": 9.71, "displayname": "New Jersey" }] }, { "name": "US-NM", "children": [{ "name": "NM", "size": 48781, "mcperpatient": 10.18, "displayname": "New Mexico" }] }, { "name": "US-NY", "children": [{ "name": "NY", "size": 228820, "mcperpatient": 12.33, "displayname": "New York" }] }, { "name": "US-NC", "children": [{ "name": "NC", "size": 205006, "mcperpatient": 8.73, "displayname": "North Carolina" }] }, { "name": "US-ND", "children": [{ "name": "ND", "size": 18416, "mcperpatient": 8.07, "displayname": "North Dakota" }] }, { "name": "US-OH", "children": [{ "name": "OH", "size": 223944, "mcperpatient": 9.88, "displayname": "Ohio" }] }, { "name": "US-OK", "children": [{ "name": "OK", "size": 90731, "mcperpatient": 8.22, "displayname": "Oklahoma" }] }, { "name": "US-OR", "children": [{ "name": "OR", "size": 96190, "mcperpatient": 9.97, "displayname": "Oregon" }] }, { "name": "US-PA", "children": [{ "name": "PA", "size": 232054, "mcperpatient": 9.07, "displayname": "Pennsylvania" }] }, { "name": "US-RI", "children": [{ "name": "RI", "size": 20132, "mcperpatient": 10.76, "displayname": "Rhode Island" }] }, { "name": "US-SC", "children": [{ "name": "SC", "size": 123070, "mcperpatient": 8.13, "displayname": "South Carolina" }] }, { "name": "US-SD", "children": [{ "name": "SD", "size": 29744, "mcperpatient": 10.32, "displayname": "South Dakota" }] }, { "name": "US-TN", "children": [{ "name": "TN", "size": 135220, "mcperpatient": 9.79, "displayname": "Tennessee" }] }, { "name": "US-TX", "children": [{ "name": "TX", "size": 434233, "mcperpatient": 9.18, "displayname": "Texas" }] }, { "name": "US-UT", "children": [{ "name": "UT", "size": 34062, "mcperpatient": 11.19, "displayname": "Utah" }] }, { "name": "US-VT", "children": [{ "name": "VT", "size": 14925, "mcperpatient": 8.51, "displayname": "Vermont" }] }, { "name": "US-VA", "children": [{ "name": "VA", "size": 87478, "mcperpatient": 9.06, "displayname": "Virginia" }] }, { "name": "US-WA", "children": [{ "name": "WA", "size": 118461, "mcperpatient": 9.17, "displayname": "Washington" }] }, { "name": "US-WV", "children": [{ "name": "WV", "size": 58733, "mcperpatient": 11.12, "displayname": "West Virginia" }] }, { "name": "US-WI", "children": [{ "name": "WI", "size": 117000, "mcperpatient": 10.14, "displayname": "Wisconsin" }] }, { "name": "US-WY", "children": [{ "name": "WY", "size": 18583, "mcperpatient": 10.14, "displayname": "Wyoming" }] }], "minvalue": 8.07, "maxvalue": 23.2, "statecounty": "State" }
$('#mapdiv3').empty();
var color = ["#4F9A85", '#79A163', '#F0C26A', '#C26B50']
try {
var r = 325,
format = d3.format(",d"),
colorScale = d3.scale.quantize()
.domain([json.minvalue, json.maxvalue])
.range(color);
var bubble = d3.layout.pack()
.sort(null)
.size([r, r])
.padding(1);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return json.statecounty + ": <strong>" + d.dispname + "</strong> <br/> Unique Patients**: <strong>" + format(d.value) + "</strong> <br/> Med per Patient: <strong>$" + d.sc + "</strong> <br/>";
})
var vis = d3.select("#mapdiv3").append("svg")
.attr("width", r)
.attr("height", r)
.attr("class", "bubble");
vis.call(tip);
var node = vis.selectAll("g.node")
.data(bubble.nodes(classes(json))
.filter(function (d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
//node.append("title")
// .text(function (d) // { return d.className + ": " + format(d.value); });
// { return "Name: <strong>" + d.className + "</strong> <br/> Unique Patients: <strong>" + format(d.value) + "</strong> <br/> Medical Care per Patient: <strong>" + d.sc + "</strong> <br/>"; });
node.append("circle")
.attr("r", function (d) { return d.r; })
.style("fill", function (d) { return colorScale(d.sc); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function (d) { return d.className.substring(0, d.r / 3) });
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function (child) { recurse(node.name, child); });
else {
classes.push({ packageName: name, className: node.name, value: node.size, sc: node.mcperpatient, dispname: node.displayname });
}
}
recurse(null, root);
return { children: classes };
}
}
catch (err) {
alert( err.message);
}
}
</script>
<form id="form1" runat="server">
<div id="mapdiv3" style="height: 300px; width=400px; border: none; text-align: center"></div>
</form>
</body>
</html>
1 个答案:
答案 0 :(得分：1)
将脚本也放在HTML头中..
你有嵌套在PopulateBubbleChart函数中的类函数，你可能想把它放在那个函数的外面。然后你有一个与递归函数类似的问题。您也不希望将您的函数命名为与数组相同的名称。
你有几个问题：这里有一个jsfiddle，可以用来重新拼凑你的代码：http://jsfiddle.net/ouzo4rje/1/
HTML
<head runat="server">
<title></title>
<script src="../D3js/d3.min.js" type="text/javascript"></script>
<script src="../D3js/d3.tip.v0.6.3.js" type="text/javascript"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
</head>
<body onload="PopulateBubbleChart()">
<form id="form1" runat="server">
<div id="mapdiv3" style="height: 300px; width: 400px; border: none; text-align: center;"></div>
</form>
</body>
CSS
.d3-tip {
line-height: 1;
padding: 4px 10px;
background: whitesmoke;
color: black;
border-radius: 5px;
border-style: solid;
border-width: 1px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 12px;
text-align: left;
}
/* Creates a small triangle extender for the tooltip*/
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: black;
content:"\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
JS
function PopulateBubbleChart() {
var json = {
"name": "flare",
"children": [{
"name": "US-AL",
"children": [{
"name": "AL",
"size": 106463,
"mcperpatient": 9.11,
"displayname": "Alabama"
}]
}, {
"name": "US-AK",
"children": [{
"name": "AK",
"size": 14693,
"mcperpatient": 12.85,
"displayname": "Alaska"
}]
}, {
"name": "US-AZ",
"children": [{
"name": "AZ",
"size": 137362,
"mcperpatient": 9.48,
"displayname": "Arizona"
}]
}, {
"name": "US-AR",
"children": [{
"name": "AR",
"size": 85795,
"mcperpatient": 10.27,
"displayname": "Arkansas"
}]
}, {
"name": "US-CA",
"children": [{
"name": "CA",
"size": 444432,
"mcperpatient": 11.72,
"displayname": "California"
}]
}, {
"name": "US-CO",
"children": [{
"name": "CO",
"size": 90822,
"mcperpatient": 9.36,
"displayname": "Colorado"
}]
}, {
"name": "US-CT",
"children": [{
"name": "CT",
"size": 51360,
"mcperpatient": 11.1,
"displayname": "Connecticut"
}]
}, {
"name": "US-DE",
"children": [{
"name": "DE",
"size": 14676,
"mcperpatient": 10.08,
"displayname": "Delaware"
}]
}, {
"name": "US-DC",
"children": [{
"name": "DC",
"size": 8800,
"mcperpatient": 23.2,
"displayname": "District of Columbia"
}]
}, {
"name": "US-FL",
"children": [{
"name": "FL",
"size": 465279,
"mcperpatient": 9.21,
"displayname": "Florida"
}]
}, {
"name": "US-GA",
"children": [{
"name": "GA",
"size": 167445,
"mcperpatient": 8.4,
"displayname": "Georgia"
}]
}, {
"name": "US-HI",
"children": [{
"name": "HI",
"size": 23824,
"mcperpatient": 10.21,
"displayname": "Hawaii"
}]
}, {
"name": "US-ID",
"children": [{
"name": "ID",
"size": 39928,
"mcperpatient": 8.33,
"displayname": "Idaho"
}]
}, {
"name": "US-IL",
"children": [{
"name": "IL",
"size": 173998,
"mcperpatient": 10.92,
"displayname": "Illinois"
}]
}, {
"name": "US-IN",
"children": [{
"name": "IN",
"size": 122936,
"mcperpatient": 9.13,
"displayname": "Indiana"
}]
}, {
"name": "US-IA",
"children": [{
"name": "IA",
"size": 71758,
"mcperpatient": 8.09,
"displayname": "Iowa"
}]
}, {
"name": "US-KS",
"children": [{
"name": "KS",
"size": 58097,
"mcperpatient": 9.64,
"displayname": "Kansas"
}]
}, {
"name": "US-KY",
"children": [{
"name": "KY",
"size": 101096,
"mcperpatient": 9.28,
"displayname": "Kentucky"
}]
}, {
"name": "US-LA",
"children": [{
"name": "LA",
"size": 76489,
"mcperpatient": 9.56,
"displayname": "Louisiana"
}]
}, {
"name": "US-ME",
"children": [{
"name": "ME",
"size": 39358,
"mcperpatient": 8.52,
"displayname": "Maine"
}]
}, {
"name": "US-MD",
"children": [{
"name": "MD",
"size": 53461,
"mcperpatient": 10.43,
"displayname": "Maryland"
}]
}, {
"name": "US-MA",
"children": [{
"name": "MA",
"size": 84345,
"mcperpatient": 13.02,
"displayname": "Massachusetts"
}]
}, {
"name": "US-MI",
"children": [{
"name": "MI",
"size": 142558,
"mcperpatient": 9.46,
"displayname": "Michigan"
}]
}, {
"name": "US-MN",
"children": [{
"name": "MN",
"size": 108274,
"mcperpatient": 9.69,
"displayname": "Minnesota"
}]
}, {
"name": "US-MS",
"children": [{
"name": "MS",
"size": 69676,
"mcperpatient": 9.49,
"displayname": "Mississippi"
}]
}, {
"name": "US-MO",
"children": [{
"name": "MO",
"size": 109455,
"mcperpatient": 8.59,
"displayname": "Missouri"
}]
}, {
"name": "US-MT",
"children": [{
"name": "MT",
"size": 35189,
"mcperpatient": 8.6,
"displayname": "Montana"
}]
}, {
"name": "US-NE",
"children": [{
"name": "NE",
"size": 47275,
"mcperpatient": 8.74,
"displayname": "Nebraska"
}]
}, {
"name": "US-NV",
"children": [{
"name": "NV",
"size": 65443,
"mcperpatient": 12.04,
"displayname": "Nevada"
}]
}, {
"name": "US-NH",
"children": [{
"name": "NH",
"size": 28604,
"mcperpatient": 9.73,
"displayname": "New Hampshire"
}]
}, {
"name": "US-NJ",
"children": [{
"name": "NJ",
"size": 77179,
"mcperpatient": 9.71,
"displayname": "New Jersey"
}]
}, {
"name": "US-NM",
"children": [{
"name": "NM",
"size": 48781,
"mcperpatient": 10.18,
"displayname": "New Mexico"
}]
}, {
"name": "US-NY",
"children": [{
"name": "NY",
"size": 228820,
"mcperpatient": 12.33,
"displayname": "New York"
}]
}, {
"name": "US-NC",
"children": [{
"name": "NC",
"size": 205006,
"mcperpatient": 8.73,
"displayname": "North Carolina"
}]
}, {
"name": "US-ND",
"children": [{
"name": "ND",
"size": 18416,
"mcperpatient": 8.07,
"displayname": "North Dakota"
}]
}, {
"name": "US-OH",
"children": [{
"name": "OH",
"size": 223944,
"mcperpatient": 9.88,
"displayname": "Ohio"
}]
}, {
"name": "US-OK",
"children": [{
"name": "OK",
"size": 90731,
"mcperpatient": 8.22,
"displayname": "Oklahoma"
}]
}, {
"name": "US-OR",
"children": [{
"name": "OR",
"size": 96190,
"mcperpatient": 9.97,
"displayname": "Oregon"
}]
}, {
"name": "US-PA",
"children": [{
"name": "PA",
"size": 232054,
"mcperpatient": 9.07,
"displayname": "Pennsylvania"
}]
}, {
"name": "US-RI",
"children": [{
"name": "RI",
"size": 20132,
"mcperpatient": 10.76,
"displayname": "Rhode Island"
}]
}, {
"name": "US-SC",
"children": [{
"name": "SC",
"size": 123070,
"mcperpatient": 8.13,
"displayname": "South Carolina"
}]
}, {
"name": "US-SD",
"children": [{
"name": "SD",
"size": 29744,
"mcperpatient": 10.32,
"displayname": "South Dakota"
}]
}, {
"name": "US-TN",
"children": [{
"name": "TN",
"size": 135220,
"mcperpatient": 9.79,
"displayname": "Tennessee"
}]
}, {
"name": "US-TX",
"children": [{
"name": "TX",
"size": 434233,
"mcperpatient": 9.18,
"displayname": "Texas"
}]
}, {
"name": "US-UT",
"children": [{
"name": "UT",
"size": 34062,
"mcperpatient": 11.19,
"displayname": "Utah"
}]
}, {
"name": "US-VT",
"children": [{
"name": "VT",
"size": 14925,
"mcperpatient": 8.51,
"displayname": "Vermont"
}]
}, {
"name": "US-VA",
"children": [{
"name": "VA",
"size": 87478,
"mcperpatient": 9.06,
"displayname": "Virginia"
}]
}, {
"name": "US-WA",
"children": [{
"name": "WA",
"size": 118461,
"mcperpatient": 9.17,
"displayname": "Washington"
}]
}, {
"name": "US-WV",
"children": [{
"name": "WV",
"size": 58733,
"mcperpatient": 11.12,
"displayname": "West Virginia"
}]
}, {
"name": "US-WI",
"children": [{
"name": "WI",
"size": 117000,
"mcperpatient": 10.14,
"displayname": "Wisconsin"
}]
}, {
"name": "US-WY",
"children": [{
"name": "WY",
"size": 18583,
"mcperpatient": 10.14,
"displayname": "Wyoming"
}]
}],
"minvalue": 8.07,
"maxvalue": 23.2,
"statecounty": "State"
}
$('#mapdiv3').empty();
var color = ["#4F9A85", '#79A163', '#F0C26A', '#C26B50']
try {
var r = 325,
format = d3.format(",d"),
colorScale = d3.scale.quantize()
.domain([json.minvalue, json.maxvalue])
.range(color);
var bubble = d3.layout.pack()
.sort(null)
.size([r, r])
.padding(1);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return json.statecounty + ": <strong>" + d.dispname + "</strong> <br/> Unique Patients**: <strong>" + format(d.value) + "</strong> <br/> Med per Patient: <strong>$" + d.sc + "</strong> <br/>";
});
var vis = d3.select("#mapdiv3").append("svg")
.attr("width", r)
.attr("height", r)
.attr("class", "bubble");
vis.call(tip);
var node = vis.selectAll("g.node")
.data(bubble.nodes(classes(json))
.filter(function (d) {
return !d.children;
}))
.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
//node.append("title")
// .text(function (d) // { return d.className + ": " + format(d.value); });
// { return "Name: <strong>" + d.className + "</strong> <br/> Unique Patients: <strong>" + format(d.value) + "</strong> <br/> Medical Care per Patient: <strong>" + d.sc + "</strong> <br/>"; });
node.append("circle")
.attr("r", function (d) {
return d.r;
})
.style("fill", function (d) {
return colorScale(d.sc);
});
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function (d) {
return d.className.substring(0, d.r / 3)
});
} catch (err) {
alert(err.message);
}
}
// Returns a flattened hierarchy containing all leaf nodes under the root.
var arrClasses = [];
function classes(root) {
recurse(null, root);
return {
children: arrClasses
};
}
function recurse(name, node) {
if (node.children) {
node.children.forEach(function (child) {
recurse(node.name, child);
});
} else {
arrClasses.push({
packageName: name,
className: node.name,
value: node.size,
sc: node.mcperpatient,
dispname: node.displayname
});
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？