d3pie.Js饼图错误以启动脚本

Question

我正在尝试使用 d3pie 脚本，但由于某种原因，脚本执行

这是我的 html

<html>
<head>
    <script type="text/javascript" src="./d3/d3.min.js"></script>
    <script type="text/javascript" src="./d3pie.min.js"></script>
    <script type="text/javascript" src="./d3js.js"></script>
</head>
<body>
    <div id="pieChart"></div>
</body>

这是我为了在d3js.js

中获取饼图而编写的js

var pie = new d3pie("pieChart", {
"header": {
    "title": {
        "text": "PROYECTOS",
        "fontSize": 28,
        "font": "verdana"
    },
    "subtitle": {
        "text": "",
        "color": "#ccc",
        "fontSize": 18,
        "font": "verdana"
    },
    "titleSubtitlePadding": 7
},
"footer": {
    "text": "Fuente: yo",
    "color": "#ccc",
    "fontSize": 11,
    "font": "courier",
    "location": "bottom-center"
},
"size": {
    "canvasWidth": 682,
    "pieInnerRadius": "50%",
    "pieOuterRadius": "72%"
},
"data": {
    "content": [
        {
            "label": "Programación",
            "value": 6,
            "color": "#82ccfb"
        },
        {
            "label": "Blogging",
            "value": 2,
            "color": "#0e4a5a"
        },
        {
            "label": "Ilustración / Arte",
            "value": 6,
            "color": "#395197"
        },
        {
            "label": "Diseño Gráfico",
            "value": 5,
            "color": "#457cda"
        },
        {
            "label": "Rotulación",
            "value": 2,
            "color": "#b0dae1"
        },
        {
            "label": "Agricultura",
            "value": 1,
            "color": "#062831"
        },
        {
            "label": "Diseño Web",
            "value": 8,
            "color": "#2c8bb1"
        }
    ]
},
"labels": {
    "outer": {
        "pieDistance": 28
    },
    "inner": {
        "format": "none"
    },
    "mainLabel": {
        "font": "verdana",
        "fontSize": 17
    },
    "percentage": {
        "color": "#e1e1e1",
        "font": "verdana",
        "decimalPlaces": 0
    },
    "value": {
        "color": "#e1e1e1",
        "font": "verdana"
    },
    "lines": {
        "enabled": true,
        "style": "straight"
    }
},
"effects": {
    "pullOutSegmentOnClick": {
        "effect": "linear",
        "speed": 400,
        "size": 8
    }
},
"misc": {
    "pieCenterOffset": {
        "y": -15
    }
},
"callbacks": {}});

但是当我在浏览器中运行这段代码时，我得到

d3pie error: the first d3pie() param must be a valid DOM element (not jQuery) or a ID string.

我是新手，非常感谢任何帮助

Answer 1

您应该将对 d3js.js 的引用向下移动一点。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="d3.min.js"></script>
    <script type="text/javascript" src="d3pie.js"></script>
</head>
<body>
    <div id="pieChart"></div>
    //you should include the d3js.js here
    <script type="text/javascript" src="d3js.js"></script>
</body>

可执行plnkr

d3pie.Js饼图错误以启动脚本

d3pie.Js Pie chart error to get the script started

d3.js