d3.js 条形图面临工具提示问题

Question

我有以下 d3.js 脚本来创建条形图，效果很好。我添加了显示工具提示的功能（不确定我是否在正确的位置添加了它），它工作正常，但它对现有的 mouseout 事件造成了问题。

问题： 问题是以下代码不再起作用。当我将鼠标悬停在上面时，它不会变成灰色。

              .on('mouseout', function (d) {
              d3.select(this)
                .attr('fill', 'blue');

但是，如果我评论以下行，则上面的 mouseout 事件将完美运行。

        .on('mouseover', tip.show)                  
        .on('mouseout', tip.hide)

完成脚本 var jsonData = @Html.Raw(Json.Encode(模型)); 数据 = jsonData; 初始化图表（）；函数 InitChart() {

        var barData = data;

        var vis = d3.select('#SummaryChart'),
          WIDTH = 500,
          HEIGHT = 375,
          MARGINS = {
              top: 20,
              right: 20,
              bottom: 20,
              left: 150
          },
          xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function (d) {
              return d.Date;
          })),


          yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
            d3.max(barData, function (d) {
                return d.Duration;
            })
          ]),

          xAxis = d3.svg.axis()
            .scale(xRange)
            .tickSize(0)
            .tickSubdivide(true),

          yAxis = d3.svg.axis()
            .scale(yRange)
            .tickSize(0)
            .orient("left")
            .tickSubdivide(true);

        var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
      return "<strong>Duration:</strong> <span style='color:red'>" + d.Duration + "</span>";
  })

        vis.call(tip);

        vis.append('svg:g')
          .attr('class', 'x axis')
          .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
          .call(xAxis);

        vis.append('svg:g')
          .attr('class', 'y axis')
          .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
          .call(yAxis);

        vis.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "end")
        .attr("font-size", "20px")
        .attr("x", WIDTH)
        .attr("y", HEIGHT + 20)
        .text("Time");

        vis.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .attr("font-size", "20px")
        .attr("y", 100)
        .attr("x",-100)
        .attr("dy", ".75em")
        .attr("transform", "rotate(-90)")
        .text("Hours:");

        vis.selectAll('rect')
          .data(barData)
          .enter()
          .append('rect')
          .attr('x', function (d) {
              return xRange(d.Date);
          })
          .attr('y', function (d) {
              return yRange(d.Duration);
          })
          .attr('width', xRange.rangeBand())
          .attr('height', function (d) {
              return ((HEIGHT - MARGINS.bottom) - yRange(d.Duration));
          })

          .attr('fill', 'blue')
          .on('mouseover', function (d) {
              d3.select(this)
                .attr('fill', 'grey');
          })

          .on('mouseout', function (d) {
              d3.select(this)
                .attr('fill', 'blue');
          })
        .on('mouseover', tip.show)                  
        .on('mouseout', tip.hide)
    }
</script>

有人能指出哪里出了问题以及我如何使工具提示和鼠标变成灰色一起工作吗？

Answer 1

与 jQuery 不同，D3 每个操作只允许一个回调。因此，如果您附加两个 .on('mouseout') 回调，则只会执行最后一个回调。参见：

d3.select('div')
  .on('mouseout', function() {console.log('A')})
  .on('mouseout', function() {console.log('B')})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style='width:250px;height:250px;background:red'></div>

您有两种解决方法。一种，如评论中所建议的，是在回调中同时调用 attr 和 tooltip，如下所示：

.on('mouseout', function (d) {
  d3.select(this).attr('fill', 'blue');
  tip.hide();
}

第二种是使用点 . 表示法，如 API 第二段

中所述

If an event listener was already registered for the same type on the selected element, the existing listener is removed before the new listener is added. To register multiple listeners for the same event type, the type may be followed by an optional namespace, such as "click.foo" and "click.bar".

所以在你的情况下

.on('mouseout.attr', function (d) {
  d3.select(this)
    .attr('fill', 'blue');
})
.on('mouseout.tip', tip.hide)

工作示例：

d3.select('div')
  .on('mouseout.logA', function() {console.log('A')})
  .on('mouseout.logB', function() {console.log('B')})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style='width:250px;height:250px;background:red'></div>

d3.js 条形图面临工具提示问题

d3.js Bar Chart facing issue with tooltip

d3.js