Question

我正在尝试将d3.js中的工具提示链接到我的条形图数据，但是我似乎找不到合适的方法。任何人都可以帮我吗？我见过使用醉酒的方法，但我不知道这相对的好处。我只是想将数据链接到工具提示以启动。然后我将尝试在工具提示中构建一个较小的图形，但这是最终目标！

非常感谢任何帮助！

到目前为止，这是我的代码：

NSTimeZone *currentDateTimeZone = [NSTimeZone timeZoneWithAbbreviation:@"EST"];
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setTimeZone:currentDateTimeZone];

Answer 1

如何：在您的栏中添加更多代码鼠标悬停和 mouseout 听众。

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function (d) {return x(Math.min(0, d.value));})
    .attr("y", function (d) {return y(d.name);})
    .attr("width", function (d) {return Math.abs(x(d.value) - x(0));})
    .attr("height", y.rangeBand())
    .on("mouseover", function(d){
        tooltip
            .style("visibility", "visible")
            .text(d.value2+"%"); // Add text to tooltip
    })
    .on("mousemove", function(){
        tooltip
            .style("top", (event.pageY-10)+"px")
            .style("left",(event.pageX+10)+"px");
    })
    .on("mouseout", function(d){
        tooltip
            .style("visibility", "hidden")
            .text(''); // Remove text from tooltip
    });

将条形图数据链接到d3工具提示

1 个答案: