Question

我提供了下面的链接，然后将其与我自己的数据一起使用，并且以图像的形式在下面提供了由自己的数据获得的结果。

I followed this link to create my contour chart

The image shows up the result of contour chart plotted with my data

我正在从计算机中读取Excel文件，然后从中读取行并转换为轮廓所需的数组格式。然后将这些数据传递到svg路径。我是stackoverflow的初学者。请！指导我如何使尖锐边缘光滑。

我将数字数组作为ContoursData传递给d3.contours（） .size（[24，56]）（contoursData）

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>

<!-- Load saveSvgAsPng.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/save-svg-as-png/1.4.17/saveSvgAsPng.js"></script>

<!-- Load xlsx.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>

<!-- Load jszip.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>

<!-- body starts here -->

<body>
  <div id="my_dataviz"></div>

  <input type="file" id="fileUpload" />
  <input type="button" id="upload" value="Draw Chart" onclick="Upload()" />
  <hr />
  <div id="dvExcel"></div>

</body>
<!-- body ends here -->

<!-- script for drawing chart starts here -->
<script type="text/javascript">

  function createChart(excelRows) {

    var width = 850;
    var height = 600;

    function grid(excelRows) {
      let dataArray = []
      for (let i = 0; i < excelRows.length; i++) {
        Object.keys(excelRows[i]).forEach((item) => {
          dataArray.push(parseFloat(excelRows[i][item]))
        })
      }

      const q = 1; // The level of detail, e.g., sample every 4 pixels in x and y.
      const x0 = -q / 2; const x1 = width + 28 + q;
      const y0 = -q / 2; const y1 = height + q;
      const n = Math.ceil((x1 - x0) / q);
      const m = Math.ceil((y1 - y0) / q);
      const grid = dataArray;

      grid.x = -q;
      grid.y = -q;
      grid.k = q;
      grid.n = n;
      grid.m = m;
      return grid;
    }

    gr = grid(excelRows);

    // d3 countours with the size is instantiated here
    var contours = d3.contours()
      .size([24, 56])(gr);

    chart()

    function chart() {
      var svg;
      // creating an instance of d3-chart here

      var svg = d3.select("body")
        .append("svg")
        .attr("viewBox", [0, 0, 100, 100])
        .attr("width", width)
        .attr("height", height);

      svg.selectAll("path")
        .data(contours)
        .enter()
        .append("path")
        .style('fill-opacity', 0.5)
        .attr("stroke", "#fff")
        .attr("stroke-opacity", 0.10)
        .attr("d", d3.geoPath());

      // Getting the d3js SVG element and save using saveSvgAsPng.js
       saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png", { scale: 2, backgroundColor: "#FFFFFF" });
    }


  }
</script>
<!-- script for drawing chart ends here -->

<script type="text/javascript">
  function Upload() {
    //Reference the FileUpload element.
    var fileUpload = document.getElementById("fileUpload");

    //Validate whether File is valid Excel file.
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
    // if (regex.test(fileUpload.value.toLowerCase())) {
    // if (typeof (FileReader) != "undefined") {
    var reader = new FileReader();
    //For Browsers other than IE.
    if (reader.readAsBinaryString) {
      reader.onload = function (e) {
        ProcessExcel(e.target.result);
      };
      reader.readAsBinaryString(fileUpload.files[0]);
    } else {
      //For IE Browser.
      reader.onload = function (e) {
        var data = "";
        var bytes = new Uint8Array(e.target.result);
        for (var i = 0; i < bytes.byteLength; i++) {
          data += String.fromCharCode(bytes[i]);
        }
        ProcessExcel(data);
      };
      reader.readAsArrayBuffer(fileUpload.files[0]);
    }

  };
  function ProcessExcel(data) {
    //Read the Excel File data.
    var workbook = XLSX.read(data, {
      type: 'binary'
    });

    //Fetch the name of First Sheet.
    var firstSheet = workbook.SheetNames[0];

    //Read all rows from First Sheet into an JSON array.
    var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);

    createChart(excelRows)
  }

</script> ```

数据可视化时如何平滑d3 Contour的锐利边缘？

0 个答案: