Question

我想要的只是加载一个基本的饼图/圆环图（实际上除此之外还有几个条形图），但看起来我的内容有些错误。如果我评论相同，我可以提供裸骨python渲染页面（但不是饼图）。

<!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>

Answer 1

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

结帐this answer，这可能会有所帮助。

d3饼图未加载

1 个答案: