javascript - d3.js 更新饼图

Question

我正在开发一个项目，用于可视化公司正在收集的数据，并使用 d3.js 来显示它。然而，我无法很好地理解它，并且正在努力更新图表。所有示例似乎都使用 .tsv 文件(？)或 json 文件。这使用 d3.tsv.etc 或类似的模式词。

我将从 API 中以 javascript 中的 var 形式获取我的信息。并且需要帮助设置一个函数，该函数将使用该 var 作为参数来更新图表。到目前为止我所拥有的是这样的:

var vis = d3.select("#graphs")
    .append("svg:svg")
    .data([data])
        .attr("width", w)
        .attr("height", h)
    .append("svg:g")
        .attr("transform", "translate(" + r + "," + (r + 50) + ")");
vis.append("text")
    .attr("x", 0)
    .attr("y", -(r + 10))
    .style("text-anchor", "middle")
    .text("Pages Visited");
var arc = d3.svg.arc()
    .outerRadius(r);
var pie = d3.layout.pie()
    .value(function (d) { return d.value; });
var arcs = vis.selectAll("g.slice")
    .data(pie)
    .enter()
          .append("svg:g")
            .attr("class", "slice");
arcs.append("svg:path")
        .attr("fill", function (d, i) { return color(i); })
        .attr("d", arc);
arcs.append("svg:text")
     .attr("transform", function (d) {
         d.innerRadius = 0;
         d.outerRadius = r;
         return "translate(" + arc.centroid(d) + ")";
     })
    .attr("fill", "white")
    .attr("text-anchor", "middle")
    .text(function (d, i) { return data[i].label; });

目前的数据是:

data = [{ "label": "Example 1", "value": 15 },
        { "label": "Example 2", "value": 65 },
        { "label": "Example 3", "value": 80 },
        { "label": "Example 4", "value": 40 }];

但这将被 API 调用取代。

Answer 1

这部分代码创建饼图布局函数:

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

为了实际布局您的数据，您应该将其传递给创建的函数:

var layedOutData = pie(data)

然后，您可以将此layedOutData传递给切片选择的data，即

var arcs = vis.selectAll("g.slice")
  .data(layedOutData)

在代码的 enter() 部分中，您添加新切片并根据生成的布局为其分配属性。如果稍后您的数据发生变化并且您希望更新切片(等)，那么您只需将新数据添加到选择中并更新属性...

vis.selectAll("g.slice")
  .data(updatedLayedOutData)
  .select('svg:path')
  .attr('d',arc)