Question

我正在尝试绘制圆形热量或环形图表。 d3js有几种选择。最流行的似乎是使用饼图布局来制作多个donut rings另一种选择是使用圆形热图like this one -

然而，这两者都使用填充片段作为描绘区域大小的方式。然而，我想用线来描绘一段时间内的事件。每条线都出现在特定的环中。

为了达到这个效果，我已经调整了这个径向天气图 - http://bl.ocks.org/susielu/b6bdb82045c2aa8225f5

这是我迄今为止的尝试： http://blockbuilder.org/jalapic/12a3a23651f40283d489

它没有标签，但每个戒指（总共12个）代表个别主题。每个部分代表一个时间样本（在这里说几个月但可以是任何东西）。线条在它们所属的每个环内绘制。我保留了与天气示例相同的变量名称，以便在我的精简代码和作者的原始代码之间进行比较。

这就是它的样子：

我的问题是如何将鼠标悬停在每个戒指上以使戒指的内容（即线条）保持可见，即隐藏其他戒指 - 这样可以更容易地查看图表。

以下是戒指组成方式的代码：

var mycircles =    [110,100, 90, 80, 70, 60,50,40,30,20,10,0] 

   origin.selectAll('circle.axis-green')
    .data(mycircles)       //original circles
    .enter()
    .append('circle')
    .attr('r', function(d) { return rScale(d)})
    .style("fill", "#fff8ee")
    .style("opacity", .05)
    .attr('class', 'axis record')
    .on("mouseover", function(d) {d3.select(this).style("fill", "red");})       
    .on("mouseout", function(d) {d3.select(this).style("fill", "#fff8ee");
});

可以看出，戒指实际上是重叠的圆圈。有没有办法实现我尝试使用我采用的方法做的事情，或者我是否必须回过头来处理像热图或饼图布局这样的细分市场？

Answer 1

查看您的数据和代码，一种方法是为每行代表一个类来表示它的环位置。然后，您可以使用mouseover和mouseout事件切换这些行的不透明度。

首先，创建一对辅助函数：

// which ring is currently highlighted
var curRing = null;
// show all rings
function unShowRing(){
  d3.selectAll(".record")
    .style("opacity", 1);
  curRing = null;
}
// only show current ring
function showRing(ringId){
  // all lines that are not in my ring, hide them
  d3.selectAll(".record:not(.ring" + ringId + ")")
        .style("opacity", 0);
  curRing = ringId;
}

设置线条略有不同：

...
.enter().append('line')
    // assign a unique class to each ring's lines
    .attr('class', function(d) {
      return cl + " ring" + d.recLow/10;
    })
    // on mouseover only show my ring
    .on("mouseover", function(d){
      var ringId = d.recLow/10;
      showRing(ringId);
    })
    // on mouseout show all rings
    .on("mouseout", function(d){
      unShowRing();
    })
    // this will prevent lines transitioning in from being shown
    .style('opacity', function(d){
      if (!curRing){
        return 1;
      } else {
        var ringId = d.recLow/10;
        return ringId === curRing ? 1 : 0;
      }
    })

最后，您需要处理戒指＆＃34;圈＆＃34;如果用户将鼠标悬停在线条或戒指上，也会发生鼠标移动：

origin.selectAll('circle.axis-green')
    .data(mycircles) //original circles
    ...
    .on("mouseover", function(d) {
      d3.select(this).style("fill", "red");
      var ringId = d/10;
      showRing(ringId);
    })
    .on("mouseout", function(d) {
      d3.select(this).style("fill", "#fff8ee");
      unShowRing();
    });

这里是whole thing working。

突出显示环形图中的单个环

1 个答案: