时间戳

首页 > 解决方案 > 是否需要 ag(group) 元素中的全填充矩形元素来激活 g 元素中的整个元素？

d3.js - 是否需要 ag(group) 元素中的全填充矩形元素来激活 g 元素中的整个元素？

问题描述

当g标签绑定到鼠标悬停事件时，g标签内的元素是否响应鼠标悬停并且不需要另一个矩形来填充g标签？

我正在关注一本 d3.js 书，它指的是一个可见元素（这里是文本标签）与另一个（这里是矩形）重叠的情况，如果我将一个事件（这里是mouseover）绑定到更深的元素，当您的鼠标悬停在上部元素（文本标签） 上时，它不会调用该事件。

它提供了一个解决方案，您可以将rect和text标签组合在一起，并将事件绑定到 g 元素，以便rect和text都可以工作。

但它还需要一个 CSS 代码：pointer-events: all和另一个矩形来重叠整个矩形和 g 标签内的文本标签，在这种情况下，它将起作用。

<head>
    <meta charset="utf-8">
    <title>D3: Smoother highlight transitions</title>
    <script type="text/javascript" src="../d3.js"></script>
    <style type="text/css">
        /* No style rules here yet */
    </style>
</head>

<body>
    <script type="text/javascript">
        //Width and height
        var w = 600;
        var h = 250;
        var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
            11, 12, 15, 20, 18, 17, 16, 18, 23, 25
        ];

        var xScale = d3.scaleBand()
            .domain(d3.range(dataset.length))
            .rangeRound([0, w])
            .paddingInner(0.05);

        var yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset)])
            .range([0, h]);

        //Create SVG element
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        //Create bars
        svg.selectAll("g")
            .data(dataset)
            .enter()
            .append("g")

            .append("rect")
            .attr("x", function(d, i) {
                return xScale(i);
            })
            .attr("y", function(d) {
                return h - yScale(d);
            })
            .attr("width", xScale.bandwidth())
            .attr("height", function(d) {
                return yScale(d);
            })
            .attr("fill", function(d) {
                return "rgb(0, 0, " + Math.round(d * 10) + ")";
            });

        //Create labels
        svg.selectAll("g")
            .append("text")
            .text(function(d) {
                return d;
            })
            .attr("text-anchor", "middle")
            .attr("x", function(d, i) {
                return xScale(i) + xScale.bandwidth() / 2;
            })
            .attr("y", function(d) {
                return h - yScale(d) + 14;
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", "11px")
            .attr("fill", "white");


        //*****************to add a mouseover event to g tag and overlap the rectangle and text tags above with a rectangle***************************          
        svg.selectAll("g")
            .style("pointer-events", "all")
            .on("mouseover", function() {
                d3.select(this)
                    .select("rect")
                    .attr("fill", "orange");
            })
            .on("mouseout", function(d) {
                d3.select(this)
                    .select("rect")
                    .transition()
                    .duration(250)
                    .attr("fill", "rgb(0, 0, " + (d * 10) + ")");
            })
            .append("rect")
            .attr("x", function(d, i) {
                return xScale(i);
            })
            .attr("y", function(d) {
                return h - yScale(d);
            })
            .attr("width", xScale.bandwidth())
            .attr("height", function(d) {
                return yScale(d);
            })

        //*****************make it invisible*********************************
            .attr("fill", "none");
    </script>
</body>

你可以将它复制到一个空的 HTML 文件中，然后加载它，它是一个条形图。

唯一的问题是是否需要一个矩形来填充未空的 g 标签以使条形矩形和文本响应一起。

标签： d3.js

解决方案

推荐阅读