Question

我是d3.js的新手。我刚刚安装了它并尝试创建一个简单的图形。我使用的代码来自以下网站：https://www.tutorialspoint.com/d3js/d3js_drawing_charts.htm

运行脚本时，我只会得到空白页。我想该错误是由于d3.csv部分（路径？）引起的。在使用它之前，一切在之前的练习中都可以正常工作。 ...还是其他东西？

脚本类型=“文本/ javascript”

     var svg = d3.select("svg"),
        width = svg.attr("width"),
        height = svg.attr("height"),
        radius = Math.min(width, height) / 2; 

     var g = svg.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


     var color = d3.scaleOrdinal([
        'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
     ]);


     var pie = d3.pie().value(function(d) { 
        return d.percent; 
     });



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


     var label = d3.arc()
        .outerRadius(radius).innerRadius(radius - 80);


     d3.csv("population.csv", function(error, data) {
        if (error) {
           throw error;
        }

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



        arc.append("path")
           .attr("d", path)
           .attr("fill", function(d) { return color(d.data.states); });




        console.log(arc)


        arc.append("text").attr("transform", function(d) { 
           return "translate(" + label.centroid(d) + ")"; 
        })

        .text(function(d) { return d.data.states; });
     });



     svg.append("g")
        .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
        .append("text").text("Top population states in india")
        .attr("class", "title")
  </script>

我做错了什么？谢谢

新手如何使用d3.csv？它不起作用，我在做什么错？

0 个答案: