Question

我有一个折线图（或者，更恰当地说是连接的散点图），我在这些点周围绘制了馅饼/甜甜圈。因此，有一个数据集指定绘制点的日期和心情以及另外两个参数pos和neg，提供进入饼图的值。描述这些点的总体数据称为plotPoints。

一切都很好，但我还想做的是将饼的半径设置为pos + neg之和的函数。

当我绘制点时，我可以使用函数（d）访问所有数据。但是，在每个饼图中，函数（d）一次一个地返回有关切片的数据。 d包含当前切片的数据，而不是整体数据。对于每个饼，第一次调用arc，它具有第一个饼图切片的频率，第二次调用它时，它具有第二个饼图切片的频率。

绘制圆弧时如何引用当前的plotPoints属性，以便我可以更改饼图/圆环的半径以表示plotPoints [i] .pos + plotPoints [i] .neg？

相关代码如下所示：

var viewportMetaTag = document.querySelector('meta[name="viewport"]');
var viewportMetaTagIsUsed = viewportMetaTag && viewportMetaTag.hasAttribute('content') ? true : false;

Answer 1

如果没有更多的代码/数据来查看但是，在这种情况下，我通常隐藏我的数据中所需的变量，这很难得到权威回答 - 绑定，以便以后可用：

var g = p.selectAll(".arc")
  .data(function (d) {
    var total = d.neg + d.pos,
      pie_data = pie([d.neg, d.pos]),
      point_arc = d3.svg.arc()
        .outerRadius((total * radius) - 10) //<-- set radius based on total
        .innerRadius((total * radius) - 8);

    pie_data.forEach(function(d1){
      d1.data.arc = point_arc; //<-- stash the arc for this point in our data bindings
    });

    return pie_data;
  });
  .enter().append("g")
  .attr("class", "arc");

  g.append("path")
    .attr("d", function(d){
      return d.data.arc
    })
    .style("fill", function(d,i) { return i==0 ? "brown" : "green"; });

将饼图用作折线图中的点并更改饼图的半径

1 个答案: