Question

我在页面上有2个图表（A和B），并且希望在执行图表A上的画笔过滤器时将某些自定义行为添加到图表B.

我认为我可以通过做类似的事来实现这一目标。

charta.on('postRender', function(){

...

d3.selectAll('#chartb svg')
.data(nested, function(d){ return d.key})
.enter()
.append("g")
.attr("class", "aclass")... more code....

但是这个#chartb选择器似乎不起作用 - 当我检查DOM时，它已将<g>属性附加到<html>元素而不是svg我要追加的元素。

我想要实现的目标是什么？

Answer 1

如果您只是将内容添加到其他图表中，那么这样的事情应该是可能的。我认为您无法选择其他图表生成的项目，然后对其应用d3联接，因为它已经加入。

我认为上面代码的问题在于d3.select是您用来选择连接的上下文，而d3.selectAll是您用来实际进行数据连接的内容。参见

http://bost.ocks.org/mike/join/

所以你的代码试图加入图表和svg元素，这会产生你所描述的效果。相反，您需要d3.select svg，然后d3.selectAll要添加的元素 - 即使它们尚不存在！是的，这是一种心灵弯曲;看看上面和链接的文章，以便更好地了解它。

注意：there are dc convenience methods on the chart object将在正确的上下文中执行选择。

Answer 2

我最终通过重复调用datum（）代替.enter（）来实现这一点。有点黑客，但它有效;如果有人能提出更多的方法来实现这一点，我将非常感激。

var svg = chart.svg();

nested.forEach(function(withValues) {

                            _(withValues.values).filter(function(d){return d.value < threshold}).forEach(function(timesMatchingThreshold){
                                svg.datum(timesMatchingThreshold)
                                    .append("rect")
                                    .style("opacity", 0.6)
                                    .attr("transform", "translate(" + 30 + ", " + (-30) + ")")
                                    .attr("class", "belowThreshold")
                                    .attr("x", function(d) {return x(d.date)})
                                    .attr("y", function(d) {return 200 -  y(d.value)})
                                    .attr("width", 3)
                                    .attr("height", function(d) {return y(d.value)});

                            });

dc.js在postRender中访问其自己的图表

2 个答案: