gpt4 book ai didi

javascript - D3图表执行错误

转载 作者:太空宇宙 更新时间:2023-11-04 16:22:58 25 4
gpt4 key购买 nike

我在使用 D3 图表时遇到问题。数据无法加载,控制台报错

“(索引):54 Uncaught TypeError:nv.addGraph 不是函数(…)”。

<!DOCTYPE html>

<meta charset="utf-8">
<title>Doodsoorzaak door huidkanker </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>

<!-- <link href="css/d3.min.css" rel="stylesheet" type="text/css"> -->
<link rel="stylesheet" href="css/colors.css" />
<link rel="stylesheet" href="css/height.css" />
<link rel="stylesheet" href="css/cssstyles.css" />

</script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart1, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>

</head>

<body>
<container>
</ul>
<header>
<nav class="col-xs-12 h300" class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<center><img id="logo" src="img/Logo.png" width="auto" height="auto" /></center>
<ul id="menu">
<center> <h4> De laatste jaren is het aantal sterfte gevallen door huidkanker toegenomen. Vooral 60-plussers sterven het vaakst door huidkanker.</h4> </center>
</ul>

</div>
</nav>
</header>
<body>

<div id="chart">
<svg></svg>
</div>

<script type="text/javascript">
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label }) //Specify the data accessors.
.y(function(d) { return d.value })
.staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
.tooltips(false) //Don't show tooltips
.showValues(true) //...instead, show the bar value right on top of each bar.
.transitionDuration(350)
;

d3.select('#chart svg')
.datum(exampleData())
.call(chart);

nv.utils.windowResize(chart.update);

return chart;
});

//Each bar represents a single discrete quantity.
function exampleData() {
return [
{
key: "Cumulative Return",
values: [
{
"label" : "Infectieuze en parasitaire ziekten" ,
"value" : 3104
} ,
{
"label" : "Ziekten van hart en vaatstelsel" ,
"value" : 37862
} ,
{
"label" : "Uitwendige oorzaken v. ziekte en sterfte" ,
"value" : 6813
}
]
}
]

}



</script>


</body>

<footer>
<section class="col-xs-12 h100">
<center>
<p>
<br><br>
Copyright Tufan Ugurel
</p>
</center>
</section>
<footer>
</container>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script href="js/d3.min.js"></script>

这是我从中获取代码的演示: http://nvd3.org/examples/discreteBar.html

希望这不是一件蠢事!感谢您的帮助

最佳答案

您似乎引用了 NVD3,但只声明了 D3。如果您使用 NVD3,则需要将两者都包含在顶部,NVD3 是 D3 之上的软件包。

关于javascript - D3图表执行错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40451404/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com