0

我在使用 D3.js 制作的趋势图中添加了 20 个 SVG 方块。Ech 方块是一个可点击的对象，它可以在图形上和图形外切换线条。在 Firefox 中，方块出现在右侧花边中，在 Chrome 中，CSS 显然完全停止工作，方块刚刚落到页面底部。

这是图表的链接，http: //www.andkensol.com/dataviz/TrendGraph/trendMov.html

这里是一些我用来制作然后定位方块的 JavaScript 和 CSS。使用 position:relative 可能是原因。有人有什么意见或建议吗？

    //JS
    //AVENGERS CONTROLS 
    d3.select(".chart").append("svg")
        .attr("class", "AvengeDot")
     .on("mouseover", function(d) {
        nameInfo.transition()
            .duration(100)
            .style("opacity", .9);
        nameInfo.html("Marvel's The Avengers")
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 30) + "px");
        })
     .on("mouseout", function(d) {
        nameInfo.transition()
            .duration(200)
            .style("opacity", 0);
        })


    //HUNGER GAMES CONTROLS 
    d3.select(".chart").append("svg")
        .attr("class", "HungerDot")
     .on("mouseover", function(d) {
        nameInfo.transition()
            .duration(100)
            .style("opacity", .9);
        nameInfo.html("Hunger Games")
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 30) + "px");
        })
     .on("mouseout", function(d) {
        nameInfo.transition()
            .duration(200)
            .style("opacity", 0);
        })


           //CSS
            .AvengeDot{
            position:relative;
            left:77%;
            bottom:118%;
            width:15px;
            height:15px;
            background-color:#FF9604;
            cursor:pointer;
        }

            .HungerDot{
            position:relative;
            left:75.5%;
            bottom:114%;
            width:15px;
            height:15px;
            background-color:#FF9F18;
            cursor:pointer;
        }
4

0 回答 0