d3pie 在 JS Bin 中工作，而不是在浏览器中工作

Question

我目前正在尝试运行在我的浏览器上从 d3pie 获取示例代码，然后再开始放入我自己的 data/editing 它。当我将它复制粘贴到 JS Bin 时，无论是在 Firefox 还是 Chrome 上，它都有效。代码如下所示：

<html>
<head></head>
<body>

<div id="pieChart"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="https://rawgit.com/benkeen/d3pie/master/d3pie/d3pie.min.js">   </script>



<script>

   var randomval = 50;
   var pie = new d3pie("pieChart", {
"header": {
"title": {
"text": "Lots of Programming Languages",
"fontSize": 24,
"font": "open sans"
},
"subtitle": {
"text": "A full pie chart to show off label collision detection and resolution.",
"color": "#999999",
"fontSize": 12,
"font": "open sans"
},
"titleSubtitlePadding": 9
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasWidth": 590,
"pieOuterRadius": "90%"
},
"data": {
"sortOrder": "value-desc",
"content": [
{
"label": "JavaScript",
"value": randomval,
"color": "#2484c1"
},
{
"label": "Ruby",
"value": 218812,
"color": "#0c6197"
},
{
"label": "Java",
"value": 157618,
"color": "#4daa4b"
}
]
},
"labels": {
"outer": {
"pieDistance": 32
},
"inner": {
"hideWhenLessThanPercentage": 3
},
"mainLabel": {
"fontSize": 11
},
"percentage": {
"color": "#ffffff",
"decimalPlaces": 0
},
"value": {
"color": "#adadad",
"fontSize": 11
},
"lines": {
"enabled": true
},
"truncation": {
"enabled": true
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
},
"misc": {
"gradient": {
"enabled": true,
"percentage": 100
}
}
});

</script>

</body>
</html>

但是，当我将此代码复制粘贴到 HTML 文件和运行 HTML 文件中时 Chrome 或 Firefox，没有看到图表！！我将 d3pie.min.js 的脚本更改为：

<script src="d3pie.min.js></script>

并且确信我在本地正确保存了 d3pie.min.js 文件。我似乎无法弄清楚问题是什么以及为什么它没有在浏览器上正确显示。过去有人遇到过此类问题吗？谢谢！

Answer 1

改变

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>

到

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>

d3pie 在 JS Bin 中工作，而不是在浏览器中工作

d3pie working in JS Bin, not in browser

javascript

jquery

html

d3.js

d3pie.js