d3.js：将数据从父节点传递到子节点 [英] d3.js: Passing data from parent to child nodes

问题描述

我使用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} 
] 
}] 
  

图表运行正常，如下：

  //创建画布
 bars = svg.append（g）; 
 
 //创建单个条形并添加数据
 //'likes'绑定到第一个条形，'不喜欢'第二个
 bar = bars.selectAll（。 ）
 .data（data）
 .enter（）
 .append（g）; 
 
 //每个bar创建矩形并添加数据
 //'blue-frog'绑定到第一个矩形等
 rect = bar.selectAll（rect ）
 .data（function（d）{return d.values;}）
 .enter（）
 .append（rect）; 
 

我想在每个矩形创建工具提示，说喜欢：2这涉及绑定信息关于到长方形的条形图。我没有找到办法做到这一点（除了更改数据）。你能看到一个优雅的解决方案吗？

此外，我不确定我是否以最好的方式描述这个问题。如果您对更好的标题有任何（有礼貌的）建议，请告诉我们 - ）

解决方案

它使用几个关键的功能：

• 你可以自由地参考&然后使用选择数组（但要使用此数组，您需要知道当前选择组 - 见最后一点）


• 通过.parentNode属性，可以获取父元素节点


• 通过__data__属性，您可以获取父节点的关联数据


• 数据访问函数< i）{...} 可以以3参数形式提供： function（d，i，j）{....}




因此，在您的示例中，您可以获取选择数组：

  var selection = bar.selectAll（rect）
 .data（function（d）{return d.values;}）
 .enter（）; 
  

从选择数组中，您可以得到有问题的数据：

 选择
 .append（li）
 .text（function（d，i，j）{
 return selection [j] .parentNode .__ data __。key; 
} 
  

示例，而不是这种情况下的代码段：





http： //bl.ocks.org/4199266





正如我在上面提到的 - 我记得阅读有关数据访问器函数的3参数形式，但不能为我的生活记得在哪里 - 我欢迎指向源材料，记录这个'特征'。




I am using d3 to make a stacked bar chart.

The data is an array with one object for each bar (e.g 'likes'). Then each object contains an array of values which drive the individual rectangles per bar:

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}
          ]
        }]

The chart is working fine, like so:

// 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");

I would like to create tooltips per rectangle which say things like "Likes: 2" This involves binding information about the bar keys to the rectangles. I have not found a way to do this (other than changing the data). Can you see an elegant solution?

Also, I'm not sure I have described this question in the best way. Let me know if you have any (polite) suggestions for a better title ;-)

解决方案

Not sure if you'd consider this an elegant solution, but it avoids changing your data.

It draws on a few key 'features':

• You are at liberty to get a reference to & then use the selection array (but to use this array you need to know the current selection group - see last point)
• Through the .parentNode property, you can get the DOM element of the parent node
• Through the __data__ property, you can get to the associated data of the parent node
• The data access function function(d,i){....} can be supplied in a 3-parameter form: function(d,i,j){....} where j is the current selection group.

So, in your example, you could get the selection array:

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

From the selection array, you could get at the data in question:

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

Easier to see a full example, rather than code snippets in this case:

http://bl.ocks.org/4199266

As I mention on the gist - I recall reading about this 3-parameter form of the data accessor function, but can't for the life of me remember where - I would welcome being pointed at source material that documents this 'feature'.

这篇关于d3.js：将数据从父节点传递到子节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！