Javascript d3饼图未加载_Javascript_Html_D3.js

Javascript d3饼图未加载

javascript html d3.js

Javascript d3饼图未加载,javascript,html,d3.js,Javascript,Html,D3.js,我只想加载一个基本的饼图/油炸圈饼图（实际上还有一些条形图），但我的代码中似乎有一些错误。如果我评论相同的内容，我就能够提供基本的python呈现页面（但不是饼图） {{title}} .传奇{ 字体大小：12px； } 直肠{ 笔画宽度：2； } #图(进口),图(投标){ 宽度：50%； } .安讯士{ 字体：10px无衬线； } .轴线路径， .轴线{ 填充：无；行程：#000；形状渲染：边缘清晰； } {{haider_Imp}} {{海德鲁投标} {{haider_cpa}} {

我只想加载一个基本的饼图/油炸圈饼图（实际上还有一些条形图），但我的代码中似乎有一些错误。如果我评论相同的内容，我就能够提供基本的python呈现页面（但不是饼图）


{{title}}
.传奇{
字体大小：12px；
}
直肠{
笔画宽度：2；
}
#图(进口),图(投标){
宽度：50%；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
{{haider_Imp}}
{{海德鲁投标}
{{haider_cpa}}
{{海德鲁党}
{{haider_cpm}}
{{haider_avgbid}}
{{haider_winrate}}
（功能（d3）{
"严格使用",；
var宽度=360；
var高度=360；
变量半径=数学最小值（宽度、高度）/2；
var donutWidth=75；
变量legendRectSize=18；
var legendSpacing=4；
var color=d3.scale.category20b（）；
var svg=d3。选择（“#图表_Imp”）
.append（'svg'）
.attr（'width'，width）
.attr（'height'，height）
.append（'g'）
.attr（'transform'、'translate（+（宽度/2）+'、'+（高度/2）+'）；
var arc=d3.svg.arc（）
.内半径（半径宽度）
.外层（半径）；
var pie=d3.layout.pie（）
.value（函数（d）{返回d.impsplit；}）
.sort（空）；
d3.csv（'./static/summary.csv'，函数（错误，数据集）{
dataset.forEach（函数（d）{
d、 impsplit=+d.impsplit；
});
var path=svg.selectAll（'path'）
.数据（饼图（数据集））
.输入（）
.append（'路径'）
.attr（'d'，弧）
.attr（'fill'，函数（d，i）
{
返回颜色（d.数据.标签）；
});
var legend=svg.selectAll（'.legend1'）
.data（color.domain（））
.输入（）
.append（'g'）
.attr（'类'，'图例'）
.attr（'transform'，函数（d，i）{
变量高度=legendRectSize+legendSpacing；
var offset=height*color.domain（）.length/2；
var horz=-2*legendRectSize；
var vert=i*高度-偏移量；
返回“translate”（“+horz+”，“+vert+”）；
});
图例.append（'rect'）
.attr（'width'，legendRectSize）
.attr（'height'，legendRectSize）
.style（'填充'，颜色）
.风格（“笔画”、颜色）；
图例.append（'text'）
.attr（'x'，legendRectSize+legendSpacing）
.attr（'y'，legendRectSize-legendSpacing）
.text（函数（d）{return d；}）；
});
（窗口d3）；
var margin={顶部：20，右侧：20，底部：70，左侧：40}，
宽度=600-margin.left-margin.right，
高度=300-margin.top-margin.bottom；

这可能是因为您在.csv回调函数之外使用piechart数据集。我的印象是，在使用d3.csv（）或d3.tsv（）函数时，您需要在回调函数中使用检索到的数据。但是，您在回调函数之外使用数据

看看，这可能会有帮助

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
    .legend{
        font-size: : 12px;
    }
    rect{
        stroke-width: 2;
    }
    #chart_Imp,#chart_Bid{
        width: 50%;
    }
    .axis{
        font: 10px sans-serif;
    }
    .axis path,
    .axis line{
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    </style>
</head>
<body>
<div style="max-width: 800px; border:2px black solid">
    <h1>{{haider_Imp}}</h1>
    <div id="chart_Imp"></div>
    <h1>{{haider_Bid}}</h1>
    <div id="chart_Bid"></div>
</div>
<div id="Bar-plots">
    <div id="Bar-plots 1st set">
        <h1>{{haider_cpa}}</h1>
        <div id="cpa"></div>
        <h1>{{haider_cpc}}</h1>
        <div id="cpc"></div>
        <h1>{{haider_cpm}}</h1>
        <div id="cpm"></div>
    </div>
    <div id="Bar-plots 2nd set">
        <h1>{{haider_avgbid}}</h1>
        <div id="avg_bid"></div>
        <h1>{{haider_winrate}}</h1>
        <div id="winrate"></div>
    </div>
</div>
<script src="/static/script/d3.min.js"></script>

<script>
    (function(d3){
        'use strict';

        var width = 360;
        var height = 360;
        var radius = Math.min(width,height)/2;
        var donutWidth = 75;
        var legendRectSize = 18;
        var legendSpacing = 4;

        var color = d3.scale.category20b();

        var svg = d3.select('#chart_Imp')
        .append('svg')
        .attr('width',width)
        .attr('height',height)
        .append('g')
        .attr('transform','translate('+(width/2)+','+(height/2)+')');

        var arc = d3.svg.arc()
        .innerRadius(radius-donutWidth)
        .outerRadius(radius);

        var pie = d3.layout.pie()
        .value(function(d) { return d.impsplit; })
        .sort(null);

        d3.csv('./static/summary.csv',function(error,dataset){
            dataset.forEach(function(d) {
                d.impsplit = +d.impsplit;
        });

        var path = svg.selectAll('path')
        .data(pie(dataset))
        .enter()
        .append('path')
        .attr('d',arc)
        .attr('fill',function(d,i)
        {
            return color(d.data.label);
        });

        var legend = svg.selectAll('.legend1')
            .data(color.domain())
            .enter()
            .append('g')
            .attr('class', 'legend')
            .attr('transform', function(d, i) {
              var height = legendRectSize + legendSpacing;
              var offset =  height * color.domain().length / 2;
              var horz = -2 * legendRectSize;
              var vert = i * height - offset;
              return 'translate(' + horz + ',' + vert + ')';
            });
        legend.append('rect')
            .attr('width', legendRectSize)
            .attr('height', legendRectSize)
            .style('fill', color)
            .style('stroke', color);

        legend.append('text')
            .attr('x', legendRectSize + legendSpacing)
            .attr('y', legendRectSize - legendSpacing)
            .text(function(d) { return d; });
    });
    (window.d3);

    var margin = {top: 20,right:20, bottom: 70, left: 40},
    width = 600-margin.left-margin.right,
    height = 300 - margin.top - margin.bottom;
</script>
</body>
</html>