在d3.js中实现饼图

Question

我在d3.js中实现了条形图和折线图，但是现在我正在尝试实现饼图，但是它没有用，所以我需要你的建议。条形图和折线图工作正常...提前谢谢......这是我的代码：

  var margin = {
            top: 20,
            right: 0,
            bottom: 80,
            left: 40
        };
        var width = 700 - margin.left - margin.right;
        var height = 500 - margin.top - margin.bottom;



        var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
        var yScale = d3.scale.linear().range([height, 0]);
        var hAxis = d3.svg.axis().scale(xScale).orient('bottom').tickFormat(d3.time.format("%Y-%m-%d"));
        var vAxis = d3.svg.axis().scale(yScale).orient('left');
        var tooltip = d3.select('body').append('div')
                .style('position', 'absolute')
                .style('background', '#f4f4f4')
                .style('padding', '5 15px')
                .style('border', '1px #333 solid')
                .style('border-radius', '5px')
                .style('opacity', 'o');

        var line = d3.svg.line()
                .x(function(d) {
                    return xScale(d.date);
                })
                .y(function(d) {
                    return yScale(selectValue(d));
                })
                .interpolate("linear")
                .tension(0.9);

 //Pie chart implementationion 
        var pie = d3.layout.pie()
                .sort(null)
                .value(function(d) { return d.date; });


        var g = svg.selectAll(".arc")
                .data(pie(data))
                .enter().append("g")
                .attr("class", "arc");

        var width = 960,
                height = 500,
                radius = Math.min(width, height) / 2;

        var color = d3.scale.ordinal()
                .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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

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


        var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
                //till here
        function render(filterByDates) {


            d3.select('svg').remove();

            if (filterByDates) {
                selectDate = true;
                tempData = fliterdata;
                console.log("before date fliter data", tempData);
                var date1 = new Date(document.getElementById('field1').value);
                var date2 = new Date(document.getElementById('field2').value);

                tempData = tempData.filter(function(d) {
                    return d.date >= date1 && d.date <= date2;


                });
                console.log("After date fliter data", tempData);
            }


            xScale.domain(tempData.map(function(d) {
                return d.date;
            }).sort(function(a, b) {
                return a - b;
            }));

            yScale.domain([0, d3.max(tempData, function(d) {
                 return +selectValue(d);
            })]);

            var svg = d3.select('#chart').append('svg')
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            svg

                    .append('g')
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(hAxis)
                    .selectAll("text")
                    .style("text-anchor", "end")
                    .attr("dx", "-.8em")
                    .attr("dy", "-.55em")
                    .attr("transform", "rotate(-90)");

            svg
                    .append('g')
                    .attr("class", "yaxis")
                    .call(vAxis)

            if (chartType == 'bar') {
                svg
                        .selectAll(".bar") //makes bar
                        .data(tempData)
                        .enter().append("rect")
                        .attr("class", "bar")
                        .style("fill", "teal")
                        .attr("x", function(d) {
                            return xScale(d.date);
                        }).attr("width", xScale.rangeBand())
                        .attr("y", function(d) {


                            return yScale(selectValue(d));
                        }).attr("height", function(d) {

                    console.log("as", d.value);
                    return height - yScale(selectValue(d));
                }).on('mouseover', function(d) {
                    tooltip.transition()
                            .style('opacity', 1)

                    tooltip.html(d.value)
                            .style('left', (d3.event.pageX) + 'px')
                            .style('top', (d3.event.pagey) + 'px')
                    d3.select(this).style('opacity', 0.5)
                }).on('mouseout', function(d) {
                    tooltip.transition()
                            .style('opacity', 0)
                    d3.select(this).style('opacity', 1)
                });
            }

            if (chartType == 'line') {
                svg.append("path") // Add the line path.
                        .data(tempData)
                        .attr("class", "line")
                        .attr("d", line(tempData));
            }


 //Implementation of pie chart

            if (chartType == 'pie') {
                svg.append("path") // Add the line path.
                        .data(tempData)
                        .attr("class", "pie")
                        .attr("d", Pie(tempData));
            }
}

        d3.json(jsonURL, function(data) {

            myData = data; //data from json in mydata
            myData.forEach(function(d) {
                d.val003.replace(",",".")
                d.date = new Date(d.date);
                //d.value="";

                //d.name = +d.name;
                console.log(d.date, "Gt date");
                d.date = new Date(d.date + " UTC");
                console.log(d.date, "localtimezone date");
            });

            $("#listbox").on("click", function() {

                var key = $(this).val();
                console.log("key:", key);
                var value = $('#listbox option:selected').text();
                selectop = String(key);
                selectop = selectop.slice(-2);
                fliterdata = filterJSON(myData, key, value); //selected value from user and picks the whole element that contains that attribute
                tempData = fliterdata; //graph made by temp data
                if (selectDate)
                    render(true);
            });
        });

        function selectChartType(type) {
            chartType = type;
            render(true);
        }
    </script>