D3:.transition() 不适用于事件 [英] D3: .transition() not working with events

问题描述

我正忙于在 Angular4 中使用 D3 绘制条形图.

I'm busy plotting a bar chart using D3 in Angular4.

// Enter Phase
this.chart.selectAll('.bar')
  .data(this.barData)
  .enter()
  .append('rect')
  .attr('class', 'bar');

// Update Phase
let bars = this.chart.selectAll('.bar').transition()
  .attr('x', (d) => {return this.x(this.parseTime(d.date.toUpperCase()));})
  .attr('y', (d) => {return this.y(d.point)})
  .attr('width', 15)
  .attr('height', (d) => {return this.charDimensions.height - this.y(d.point);})
    .on("mouseover", function (d) {D3.select(this).style('opacity', 0.5);})
    .on("mouseout", function (d) {D3.select(this).style('opacity', 1);})
    .on("click", (d) => {this.barClicked.emit(d);});

// Exit phase
this.chart.selectAll('.bar')
  .data(this.barData)
  .exit().remove();

在我的绘图方法中，当我调用 animate() 时，出现错误:Error: unknown type: mouseover.这是有道理的，因为我可能试图在 D3 返回的过渡上调用 on("<event>")，过渡效果就在那里，但是，过渡之后的一切都中断了, 即:动画有效，但绘图中断.

In my plotting method, when I call animate() I get an error: Error: unknown type: mouseover. Which makes sense, since I'm probably trying to call the on("<event>") on a the transition returned by D3, the transition effect is there, however, everything after the transition breaks, i.e: The animation works, but the plotting is broken ofc.

但是，当我尝试执行以下操作时:

However when I attempt to do the following:

// Update Phase
let bars = this.chart.selectAll('.bar');
bars.transition();
bars.attr('x', (d) => {return this.x(this.parseTime(d.date.toUpperCase()));})
  .attr('y', (d) => {return this.y(d.point)})
  .attr('width', 15)
  .attr('height', (d) => {return this.charDimensions.height - this.y(d.point);})
    .on("mouseover", function (d) {D3.select(this).style('opacity', 0.5);})
    .on("mouseout", function (d) {D3.select(this).style('opacity', 1);})
    .on("click", (d) => {this.barClicked.emit(d);});

没有出现错误，但没有任何反应，对新数据集没有过渡效果.

No errors occur, but nothing happens, there is no transition effect to the new data set.

推荐答案

这里的问题是两个使用相同名称的不同方法之间的混淆:

The problem here is a confusion between two different methods that use the same name:

• selection.on(typenames[, 听众])
• transition.on(typenames[, 听众])

• selection.on(typenames[, listener])
• transition.on(typenames[, listener])

既然你有过渡选择，当你写...

Since you have a transition selection, when you write...

.on(...

该方法期望看到三件事(或类型名):

The method expects to see three things (or typenames):

• 开始"
• 结束"
• 中断"

然而，mouseover"、mouseout"或click"都不是.然后你得到你的错误...

However, "mouseover", "mouseout" or "click" are none of them. And then you get your error...

> Uncaught Error: unknown type: mouseover

解决方案:

将事件侦听器绑定到常规选择.然后，在那之后，创建您的过渡选择.

Bind the event listeners to a regular selection. Then, after that, create your transition selection.

因此，在您的情况下，将所有 on 侦听器绑定到输入"选择(顺便说一下，这更有意义)，将它们从更新选择中删除.

Therefore, in your case, bind all the on listeners to the "enter" selection (which, by the way, makes more sense), removing them from the update selection.

看看这个小演示.首先，我创建了一个常规的输入选择，并向其中添加了事件侦听器:

Have a look at this little demo. First, I create a regular, enter selection, to which I add the event listener:

var bars = svg.selectAll(null)
    .data(data)
    .enter()
    .append("rect")
    //some attr here
    .on("mouseover", function(d) {
        console.log(d)
    });

然后，我添加过渡:

bars.transition()
    .duration(1000)
    etc...

将鼠标悬停在横条上以查看鼠标悬停"工作:

Hover over the bars to see the "mouseover" working:

var svg = d3.select("svg");
var data = [30, 280, 40, 140, 210, 110];
var bars = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("width", 0)
  .attr("y", function(d, i) {
    return i * 20
  })
  .attr("height", 18)
  .attr("fill", "teal")
  .on("mouseover", function(d) {
    console.log(d)
  });

bars.transition()
  .duration(1000)
  .attr("width", function(d) {
    return d
  })

.as-console-wrapper { max-height: 25% !important;}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

这篇关于D3:.transition() 不适用于事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！