d3.js：将数据从父节点传递给子节点onclick事件

Question

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

感谢this previous question我使用parentNode .__ data __。key将与父节点关联的数据绑定到子节点。

数据是一个数组，每个数据条有一个对象（例如'likes'）。然后，每个对象包含驱动每列中的各个矩形值的数组：

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

图表工作正常，并且所以在父度量数据结合到子SVG属性：

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

// Append parent node information (e.g. 'likes') to each rectangle  
// per the SO question referenced above   
rect.attr("metric", function(d, i, j) { 
    return rect[j].parentNode.__data__.key; 
}); 

然后这允许创建每个矩形的工具提示，其中说“喜欢：2”。到现在为止还挺好。

的问题是如何与一个click事件相同的信息相关联，建立在：

rect.on("click", function(d) { 
    return _this.onChartClick(d); 
}); 

// or 

rect.on("click", this.onChartClick.bind(this)); 

这是有问题的，因为onChartClick方法需要访问数据绑定（d）和图表执行上下文（”这个'）。如果没有，我可以切换执行上下文并在onChartClick方法中调用d3.select(this).attr("metric")。

我的另一个想法是将度量作为附加参数传递，但这里使用函数（d，i，j）的技巧似乎并不奏效，因为直到发生单击事件时才运行该函数。

你能提出一个解决方案吗？

Answer 1

您可以使用封闭的参考保持像这样父数据：

bar.each(function(dbar) {   // dbar refers to the data bound to the bar 
    d3.select(this).selectAll("rect") 
     .on("click", function(drect) { // drect refers to the data bound to the rect 
     console.log(dbar.key);  // dbar.key will be either 'likes' or 'dislikes' 
     }); 
}); 

更新：

请参阅下面的各种访问DOM结构中不同级别的方法。连连看！看到这个实时版本，并尝试点击正确的div：http://bl.ocks.org/4235050

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

var chartdivs = d3.select("body").selectAll("div.chart") 
    .data([data]) // if you want to make multiple charts: .data([data1, data2, data3]) 
    .enter().append("div") 
    .attr("class", "chart") 
    .style("width", "500px") 
    .style("height", "400px"); 

chartdivs.call(chart); // chartdivs is a d3.selection of one or more chart divs. The function chart is responsible for creating the contents in those divs 

function chart(selection) { // selection is one or more chart divs 
    selection.each(function(d,i) { // for each chartdiv do the following 
    var chartdiv = d3.select(this); 
    var bar = chartdiv.selectAll(".bar") 
     .data(d) 
     .enter().append("div") 
     .attr("class", "bar") 
     .style("width", "100px") 
     .style("height", "100px") 
     .style("background-color", "red"); 

    var rect = bar.selectAll(".rect") 
     .data(function(d) { return d.values; }) 
     .enter().append("div") 
     .attr("class", "rect") 
     .text(function(d) { return d.key; }) 
     .style("background-color", "steelblue"); 

    bar.each(function(dbar) { 
     var bardiv = d3.select(this); 
     bardiv.selectAll(".rect") 
      .on("click", function(drect) { 
      d3.select(this).call(onclickfunc, bardiv); 
      }); 
    }); 

    function onclickfunc(rect, bar) { // has access to chart, bar, and rect 
     chartdiv.style("background-color", bar.datum().key === 'likes' ? "green" : "grey"); 
     console.log(rect.datum().key); // will print either 'blue-frog' or 'goodbye' 
    } 
    }); 
} 

Answer 2

rect.on("click", this.onChartClick.bind(this));将不起作用，因为您没有传递函数，而是传递函数的返回值（通过追加(this)）。

如果你想通过this和数据（d），试试这个：

// assuming you have this somewhere earlier 
var onChartClick = function() {} 

// change your parent click to 
rect.on("click", function(d) { 
    return onChartClick.call(this, d); 
});