Javascript 饼图d3.js

我正在用json数据创建一个饼图。。弧线创建得很好，但它们没有采用我提供的颜色和文字 它会解析json数据，获取值，但不会为不同的名称返回不同的颜色…文本也是如此。。但当我尝试在控制台中打印时，它会打印。。。 ... 这是我的密码

        function drawPiechart( dataurl, selector ){

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

            var color = d3.scale.category20();

            var arc = d3.svg.arc()
                .outerRadius(radius - 10)
                .innerRadius(0);
            /*var arc1 = d3.svg.arc()
                .outerRadius(radius + 10)
                .innerRadius(0);*/

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

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

            d3.json(dataurl, function(error, data) {
            console.log(data);
              data.HubActivity.hubWorkloadList.forEach(function(d) {
                d.workload = +d.workload;
                console.log(d.workload);
              });
            /*function animateFirstStep(){
                d3.select(this)
                  .transition()            
                    .delay(0)            
                    .duration(1000)
                    .attr("d",arc1)
                    .each("end", animateSecondStep);
            };
            function animateSecondStep(){
                d3.select(this)
                  .transition()
                    .duration(1000)
                    .attr("d", arc);
            };*/
              var g = svg.selectAll(".arc")
                  .data(pie(data.HubActivity.hubWorkloadList))
                .enter().append("g")
                  .attr("class", "arc");

              g.append("path")
                  .attr("d", arc)
                  .style("fill", function(d) { return color(d.trName); });
                  // .on("mouseover", animateFirstStep);

              g.append("text")
                  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
                  .attr("dy", ".35em")
                  .style("text-anchor", "middle")
                  .style("fill","black")
                  .text(function(d) { console.log( d.workload); });

            }); 
        };





        drawPiechart( "../data/pie0.json", "#workload");

这是我的json数据

{
"HubActivity": {        
    "hubWorkloadList": [
        {
            "trName": "addAccessDateValue",
            "workload": "20.00"
        },
        {
            "trName": "addAddress",
            "workload": "10.00"
        },
        {
            "trName": "getAccessDateValue",
            "workload": "10.00"
        },
        {
            "trName": "getAddress",
            "workload": "10.00"
        },
        {
            "trName": "searchCategory",
            "workload": "10.00"
        },
        {
            "trName": "searchCategoryHierarchy",
            "workload": "10.00"
        },
        {
            "trName": "updateAccessDateValue",
            "workload": "30.00"
        },
        {
            "trName": "updateAddressNote",
            "workload": "10.00"
        },
        {
            "trName": "updateAddressValue",
            "workload": "10.00"
        },
        {
            "trName": "updateAlert",
            "workload": "10.00"
        }
    ]
}
}

---

请告诉我错误发生在哪里

d3.layout.pie函数创建一个新的数据结构，其中包含在顶层绘制图表所需的信息。这就是你在选择颜色和添加文本时要处理的问题，这就是为什么它不起作用的原因——你要查找的数据不再是以前的数据了

在

pie（）

返回的每个元素中，都有一个

.data

成员，其中包含原始数据。使用此功能，您可以访问正在查找的信息。也就是说，你需要改变

.style("fill", function(d) { return color(d.trName); });

到

---

与文本类似。

函数创建一个新的数据结构，其中包含在顶层绘制图表所需的信息。这就是你在选择颜色和添加文本时要处理的问题，这就是为什么它不起作用的原因——你要查找的数据不再是以前的数据了

在

pie（）

返回的每个元素中，都有一个

.data

成员，其中包含原始数据。使用此功能，您可以访问正在查找的信息。也就是说，你需要改变

.style("fill", function(d) { return color(d.trName); });

到

文本也是如此