0

I currently have a hexagonal grid that is generated through looping through (thus the i and the j) and appending <polygon> as the following (which is nested inside a <svg>):

d3.select("g").append("polygon").attr("points", grid[i][j]).attr("style", "fill:#fff;stroke:#000;stroke-width:1;").attr("posX", j).attr("posY", i);

such that each <polygon> has the custom attributes of posX and posY.

When I try to select a given hexagon and attempt to 'highlight' the location, such as below:

d3.select("polygon[posX='1'][posY='1']").attr("style", "fill:#999;stroke:#000;stroke-width:1;");

it simply doesn't work and throws no errors. I can post more code if necessary.

Here is the broader click function:

$("polygon").click(function () {
    var x = d3.select(this).attr("posX");
    var y = d3.select(this).attr("posY");
    d3.select(this).attr("style", "fill:#333;stroke:#000;stroke-width:1;");
    $("#cords").text(x + "," + y);

    //neighbors
    for (var i = 0; i < 6; i++) {
        var ret = getNeighbor("ooq", i, x, y);
        console.log(ret);
        //d3.select("polygon[posX='" + ret[0] + "']").attr("style", "fill:#111;stroke:#000;stroke-width:1;");
        d3.select("polygon[posX='1'][posY='1']").attr("style", "fill:#999;stroke:#000;stroke-width:1;");
    }
});

I attempted a solution with these to no avail:

If I simply missed an important point in one of those references, please let me know.

Community
  • 1
  • 1
Matt
  • 1,500
  • 8
  • 23
  • 38

1 Answers1

1

I rearranged the looping to have each <polygon> be contained within a <g> tag, where I put the posX and posY attributes, instead. Through the mouseenter event, I select this using D3 on the polygon, step up to its parent, then work from there. jQuery is able to see the attributes on the <g> so this workaround seemed to accommodate my needs.

Matt
  • 1,500
  • 8
  • 23
  • 38
  • This worked also for me. I wrapped all my elements and stored the custom attributes to the partent `` tag. I was able to wrap a set of elements (rect in my case) by following this answer: https://stackoverflow.com/a/43425135/1423806 – Bemipefe Oct 27 '20 at 12:15