Question

我正在学习《网络交互式数据可视化》（第二版）。在学习向条形图添加交互性时，文本指出：

在每个组的顶部添加一个fill的{{1}}和none的{{1}}值的不可见矩形。即使rect是不可见的，它仍然会触发鼠标事件，因此您可以使rect跨越整个图表高度。最终结果是，将鼠标悬停在该列中的任何位置，即使是在蓝色短条上方的“空白”空格中，也会触发突出显示效果。

我相信我已经在适当的位置成功创建了不可见的矩形（最后，以便不位于可见的矩形后面）。我可以在列中的任何位置，甚至在蓝色短条上方的空白中也可以使用鼠标。但是，我无法弄清楚如何仅突出显示蓝色条而不突出整个容器。

Fiddle

pointer-events

Answer 1

您可以通过先从事件回调函数中选择this.parentNode，然后进行所需的选择来选择同级矩形。

d3.select(this.parentNode).select('.actualRect').attr("fill", "orange");

//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 groups to hold the bars and text for each data point
    var groups = svg.selectAll(".groups")
        .data(dataset)
        .enter()
        .append("g")
        .attr("class", "gbar");

    //Create bars
    groups.append("rect")
        .attr("class", "actualRect")
        .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
    groups.append("text")
        .text(function (d) {
            return d;
        })
        /*.style("pointer-events", "none")*/
        .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");

		// Create container rect
		// The goal is to be able to hover *above* a bar, but only highlight the visible blue bar to orange.
    // I don't understand how to select (this).('actualRect'), instead of (this).("containerRect")
    groups.append("rect")
        .attr("class", "containerRect")
        .attr("x", function (d, i) {
            return xScale(i);
        })
        .attr("y", 0)
        .attr("width", xScale.bandwidth())
        .attr("height", h)
        .attr("fill", "none")
        .style("pointer-events", "all")
        .on("mouseover", function () {
            d3.select(this.parentNode).select('.actualRect').attr("fill", "orange");
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Fiddle

定位此->具有鼠标事件的同级

1 个答案: