5

我正在使用 d3 制作堆积条形图。

数据是一个数组,每个条都有一个对象(例如“喜欢”)。然后每个对象包含一个值数组,这些值驱动每个条形的各个矩形:

data =  [{
          key = 'likes', values = [
            {key = 'blue-frog', value = 1}, 
            {key = 'goodbye', value = 2}
          ]
        }, {
          key = 'dislikes, values = [
            {key = 'blue-frog', value = 3},
            {key = 'goodbye', value = 4}
          ]
        }]

该图表工作正常,如下所示:

// Create canvas
bars = svg.append("g");

// Create individual bars, and append data
// 'likes' are bound to first bar, 'dislikes' to second
bar = bars.selectAll(".bar")
        .data(data)        
        .enter()
        .append("g");

// Create rectangles per bar, and append data
// 'blue-frog' is bound to first rectangle, etc.
rect = bar.selectAll("rect")
        .data(function(d) { return d.values;})
        .enter()
        .append("rect");

我想为每个矩形创建工具提示,其中包含“喜欢:2”之类的内容,这涉及将有关条键的信息绑定到矩形。我还没有找到一种方法来做到这一点(除了更改数据)。你能看到一个优雅的解决方案吗?

另外,我不确定我是否以最好的方式描述了这个问题。如果您对更好的标题有任何建议,请告诉我。

4

2 回答 2

12

不确定您是否认为这是一个优雅的解决方案,但它可以避免更改您的数据。

它利用了几个关键的“功能”:

  • 您可以自由获取对 & 然后使用选择数组的引用(但要使用此数组,您需要知道当前的选择组 - 见最后一点)
  • 通过 .parentNode 属性可以获取父节点的 DOM 元素
  • 通过__data__属性可以获取到父节点的关联数据
  • 数据访问函数function(d,i){....}可以以 3 参数形式提供:function(d,i,j){....}其中j是当前选择组。

因此,在您的示例中,您可以获得选择数组:

var selection = bar.selectAll("rect")
  .data(function(d) { return d.values;})
  .enter();

从选择数组中,您可以获取相关数据:

selection
  .append("li")
  .text(function(d,i,j) {
    return selection[j].parentNode.__data__.key; 
  }

在这种情况下,更容易看到完整的示例,而不是代码片段:

http://bl.ocks.org/4199266

正如我在要点上提到的那样——我记得阅读过有关数据访问器函数的这种 3 参数形式的信息,但我一生都记不起在哪里——我欢迎指出记录此“功能”的源材料。

于 2012-12-04T00:47:16.193 回答
-1

你看过Tipsy吗?

它可能会完全满足您的需求,并且会为您完成大部分工作。例如,只需添加以下文本块:

$('svg circle').tipsy({ 
  gravity: 'w', 
  html: true, 
  title: function() {
    var d = this.__data__;
var pDate = d.date;
    return 'Date: ' + pDate.getDate() + " " + monthNames[pDate.getMonth()] + " " + pDate.getFullYear() + '<br>Value: ' + d.value; 
  }
});

为您提供带有 D3 示例的所有适当数据的工具提示:带有 Tipsy 工具提示的折线图

于 2012-12-01T21:54:36.047 回答