Question

我已将调用缩放附加到我的图表中，并且工作正常。

当我将鼠标悬停事件附加到图表中的项目（矩形）时，鼠标悬停会触发，但不会调用缩放。

我正在尝试使用鼠标滚动显示工具提示，并且“鼠标单击并拖动”使图表仅在y轴上平移。

是否有一种简单的方法可以让它们一起工作，还是应该按照此示例自定义事件？

http://bl.ocks.org/stepheneb/1182434

bar = g.selectAll(".bar")
            .data(currentData)
            .enter().append('rect')
            .attr("class", "horizontal bar")
            .attr("x", 0)

        .attr("height", ordinalScale.rangeBand())
            .attr("y", function(d) {
            return ordinalScale(d.key);
        })
            .attr("width", 0)
            .on("mouseover", function(d) {

            tooltip = d3.select("body").append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);


            tooltip.style("left", (d3.event.pageX - 80) + "px")
                .style("top", (d3.event.pageY) + "px")
                .append('p')
                .text(d.key)
                .attr('class', 'tootip-key')
                .append('p')
                .text(d.value)
                .attr('class', 'tooltip-value');

            tooltip.transition()
                .duration(200)
                .style("opacity", 0.9);

        })

            .on("mouseout", function(d) {

            tooltip.remove();


        });

并且像这样附加缩放行为。

g.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .attr("pointer-events", "all")
        .call(d3.behavior.zoom().on("zoom", zoom));

谢谢！

Answer 1

获取工具提示的最简单方法是将svg:title元素附加到要获得工具提示的元素。其余的将由浏览器处理。如果您需要更高级的东西，请查看tipsy。

要将平移限制为y轴，只需忽略处理函数中x值的转换（在您的情况下为zoom）。

d3使用鼠标悬停在项目上调用缩放图形

1 个答案: