score:2

Accepted answer

Your approach of using if/else is not wrong. What you need to keep in mind is that dots and images are equivalent representations of what I'll call "points". This means that the selection shouldn't distinguish circles from images: it should just select points. This could be done by using a class selector instead of a tag selector.

In your case, the code is using two different class selectors: .dot and .image. Instead of svg.selectAll('.image') and svg.selectAll('.dot'), you could use svg.selectAll('.point') for both of them. Thus:

    const enterSelection = svg.selectAll(".point").data(data).enter();
    
    if (displaytype == "image") {
      enterSelection
        .append("svg:image")
        .attr("class", "point")
        .attr("x", xMap)
        .attr("y", yMap)
        .attr("width", logosize)
        .attr("height", logosize)
        .attr("transform", function (d) {
          return "translate(" + -d.logosize / 2 + "," + -d.logosize / 2 + ")";
        })
        .attr("xlink:href", function (d) {
          return d.brand_image;
        });
    } else {
      enterSelection
        .append("circle")
        .attr("class", "point")
        .attr("r", 3.5)
        .attr("cx", xMap)
        .attr("cy", yMap)
        .style("fill", function (d) {
          return color(cValue(d));
        });
    }

Related Query