d3.area: When changing the scope of xdomain, the plot will be missing a portion.

Community Help
1

Hi
I drew a plot using d3.area. When I change the xdomain range, a part of the plot is missing. What is the reason for this? How to avoid it?
Thanks for your help.

image
image2225×262 17.6 KB

var margin, width, height;
        this.large = 0
        margin = { top: 30, right: 30, bottom: 20, left: 50 };
        width = 880 - margin.left - margin.right;
        height = 180 - margin.top - margin.bottom;
      var typeArr = [];
      // console.log(colorArr);
      var svg = d3
          .select("#chartX")
          .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 + ")"
          );

      // create a scale for the x axis
      var x = d3.scaleLinear().domain(xDomain).range([0, width]);
      // add the x Axis
      svg
        .append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
      // add the y Axis
      var y = d3.scaleLinear().range([height, 0]);
      svg.append("g").call(d3.axisLeft(y).ticks(5));
      // Compute kernel density estimation
      var kde = kernelDensityEstimator(kernelEpanechnikov(1), x.ticks(65));
      let densityObj = {};
      var name;
        // 遍历data，将source_type放入typeArr中
        for (let j = 0; j < data.length; j++) {
          typeArr.push(data[j]["source_type"]);
        }
        // 将typeArr中的元素去重，并排序
        typeArr = [...new Set(typeArr)].sort();
        // 遍历typeArr，生成name，并计算densityObj[name]
        for (let j = 0; j < typeArr.length; j++) {
          name = "density" + j;
          densityObj[name] = kde(
            data
              .filter(function (d) {
                return d.source_type === typeArr[j];
              })
              .map(function (d) {
                return d.umap_x;
              })
          );

          // 添加path元素，并设置属性
          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
                .area()
                .curve(d3.curveBasis)
                .x(function (d) {
                  return x(d[0]);
                })
                .y0(y(0))
                .y1(function (d) {
                  return y(d[1]);
                })
            );
        }
     
          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
                .area()
                .curve(d3.curveBasis)
                .x(function (d) {
                  return x(d[0]);
                })
                .y0(y(0))
                .y1(function (d) {
                  return y(d[1]);
                })
            );
        }
      }
2

Could it be that there is no domain defined on the y scaling?

     // add the y Axis
      var y = d3.scaleLinear().range([height, 0]);

See:

3

I have tried to define a domain on the y scaling, but it has not been effective.
var y = d3.scaleLinear().range([height, 0]).domain([0,1]).nice();

4

The problem has been solved, it is a problem with the calculated kernel density.

1 Like