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)

d3.js更新饼图

1 个答案: