Question

我正在尝试在d3中设计的条形图上应用一些过渡效果。这是我的代码 -

svg.selectAll(".bar")
            .data(data)
            .enter().append("g")
            .attr("class", "bar")
            .append("rect")
            .attr("rx", barRadius)
            .attr("fill","333" )
            // .attr("color_value", "steelblue")
            .attr("index_value", function(d, i) {
                return "index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi');
            })
            .attr("class", function(d, i) {
                return "bars-Bubble-index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi')+div;
            })
            .attr("id", function(d) {
                return d[columns[0]] + ":" + d[measure1];
            })
            .attr("onclick", fun)
            .attr("x", function(d) {
                return x(d[columns[0]]);
            })
            .attr("width",0)
            .transition()
            .duration(2000)//1 second
            .attr("width", x.rangeBand())
            .attr("y", function(d) {
                return y(d[measure1]);
            })
            .attr("height", function(d) {
                return height - y(d[measure1]);
            })

转换似乎工作正常，除了我在浏览器控制台上收到以下错误这一事实 TypeError：svg.selectAll（...）。data（...）。enter（...）。append（...）。attr（...）。append（...）。attr（.. ）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（... ）.transition（...）。duration（...）。attr（...）。attr（...）。attr（...）。on不是函数 TypeError：bars.append（...）。attr（...）。attr（...）。transition（...）。duration（...）。attr（...）。attr（.. ）。过渡（...）持续时间（......）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（... ）.attr（...）。attr（...）。attr（...）。on不是函数

由于这些错误，脚本的其余部分无法正常工作并且图表显示正确。任何帮助将不胜感激。

Answer 1

在.transition()之前添加new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); scrollY += dy; } };来电，然后就可以了。

Answer 2

呼叫.transition()将返回转换，而不返回您的selectAll("bar")的结果。因此，通过在调用.on()之后调用.transition()，您试图将事件侦听器附加到过渡上，而不是附加到selectAll("bar")选择中的元素上。将呼叫移至.on()呼叫上方的.transition()，您将摆脱错误。

许多示例代码在.style()对象上使用.attr()和transition，对于那些学习D3的人来说，似乎好像他们正在对选择进行操作。情况并非如此，因为这些运算符实际上设置了transition的结束状态。尽管这样做的结果与选择操作的结果基本相同，但可能会使像我们这样的新人感到困惑。

在d3中应用转换时出错

2 个答案: