d3.js: When changing the x-axis, the shape deforms

New To Observable
1

Hi, all
I drew a density map using d3. js, when I changed the x-axis, the image deformed.
How should I avoid it?
Thank you for your early help.
Original image:

image
image1427×286 13 KB

After changing the x-axis range：
image
image1420×293 13.3 KB

My code:

  var margin = { top: 30, right: 30, bottom: 30, left: 50 },
        width = 960 - margin.left - margin.right,
        height = 200 - margin.top - margin.bottom;
      var svg;
      if ($("#chart") && $("#chart").children().length != 0) {
        // console.log("yyyyyyyyyyyy");
        $("#chart").empty(); // remove old chart
        svg = d3
          .select("#chart")
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr(
            "transform",
            "translate(" + margin.left + "," + margin.top + ")"
          );
      } else {
        svg = d3
          .select("#chart")
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr(
            "transform",
            "translate(" + margin.left + "," + margin.top + ")"
          );
      }

      var x = d3.scaleLinear().domain(this.x).range([0, width]);
      svg
        .append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
      // add the y Axis
      var y = d3.scaleLinear().range([height, 0]).domain([0, 0.5]);
      svg.append("g").call(d3.axisLeft(y));
      // Compute kernel density estimation
      var kde = kernelDensityEstimator(kernelEpanechnikov(1), x.ticks(65));

      if (this.colored == "cell") {
        let densityObj = {};

        for (let j = 0; j < colorArr.length; j++) {
          var name = "density" + j;
          densityObj[name] = kde(
            data
              .filter(function (d) {
                return d.cell === colorArr[j];
              })
              .map(function (d) {
                return d.vae_x;
              })
          );
          svg
            .append("path")
            .attr("class", "mypath")
            .datum(densityObj[name])
            .attr("fill", this.colorRange[j])
            .attr("fill-opacity", ".1")
            .attr("stroke", this.colorRange[j])
            .attr("stroke-width", 1)
            .attr("stroke-linejoin", "round")
            .attr(
              "d",
              d3
                .line()
                .curve(d3.curveBasis)
                .x(function (d) {
                  return x(d[0]);
                })
                .y(function (d) {
                  return y(d[1]);
                })
            );
        }
        console.log(densityObj);
      }

      function kernelDensityEstimator(kernel, X) {
        return function (V) {
          return X.map(function (x) {
            return [
              x,
              d3.mean(V, function (v) {
                return kernel(x - v);
              }),
            ];
          });
        };
      }
      function kernelEpanechnikov(k) {
        return function (v) {
          return Math.abs(v / k) <= 1
            ? (0.75 * (1 - Math.pow(v / k, 2))) / k
            : 0;
        };
      }
2

To fill the shape, try d3.area instead of d3.line.

5

I changed d3. line to d3. area, and this problem was solved. Thank you for your help. I’m really stupid. :sweat_smile: