Question

当我遇到一个问题时，围绕着D3的一些语法。

我有一个饼图工作得非常好，它从数据库中获取数据并用它更新图表。（我遗漏了所有数据库检索代码，并将基本的d3代码放在JSFiddle中）。但是我认为我的代码结构，特别是标签的编码效率低下。

这是JSFiddle链接。

 var label_group = svg.append("svg:g")
        .attr("class", "lblGroup")
        .attr("transform", "translate(" + +"," + +")");

    var center_group = svg.append("svg:g")
        .attr("class", "ctrGroup")
        .attr("transform", "translate(" + (width / 2) + "," + ")");

    // CENTER LABEL
    var pieLabel = center_group.append("svg:text")
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .attr("class", "midLabel")
        .text(selectCounty + selectYear);

    var sliceLabel = label_group.selectAll("text.value")
        .data(pie(data))
        .attr("dy", 21)
        .attr("text-anchor", "middle") // text-align: right



    sliceLabel.enter().append("svg:text")
        .attr("class", "ctrGroup")
        .attr("transform", function (d) {
        return "translate(" + arc.centroid(d) + ")";
    })
        .attr("dy", 21)
        .attr("text-anchor", "middle").text(function (d, i) {
        return data[i].worker_numbers;
    })

这是我的更新功能，请记住这确实有效，但我觉得我现在的方式错过了d3更新数据的优点。

 function change(data) {


            pie.value(function (d, i) {
                console.log(data[i].worker_numbers);
                return parseInt(data[i].worker_numbers);
            }); // change the value function
            path = path.data(pie); // compute the new angles
            path.transition().ease("elastic").duration(1500).attrTween("d", arcTween);
            // redraw the arcs


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

                .text(function (d, i) {
                return data[i].worker_numbers;
            });
            sliceLabel.data(pie(data))
                .transition()
                .duration(500)
                .attr("transform", function (d) {
                return "translate(" + arc.centroid(d) + ")";
            });
            arcs.append("svg:text")
                .data(pie(data))
                .transition()
                .duration(500)
                .attr("transform", function (d) {
                return "translate(" + arc.centroid(d) + ")";
            });

        }

我觉得我已经声明了太多的标签变量，因此我的图表更新方式非常低效。这些标签变量是否应附加一个变量？然后更新会更清洁。然而，当我试图分离标签变量时，我似乎弄得一团糟。

非常感谢任何帮助。

有效地更新和附加在D3中

0 个答案: