HTML/Javascript D3.js 等高线图按分辨率缩放？

如何解决HTML/Javascript D3.js 等高线图按分辨率缩放？

我最近尝试使用 D3.js 库在 HTML/JS 中创建我自己的等高线图。当复制到 https://jsfiddle.net/ 中时，下面的代码正确地创建了一个等高线图，但结果图的大小分辨率取决于我从中导出等高线的矩阵的分辨率。

因为我希望代码高效，所以我想限制从中导出轮廓的网格的分辨率。有没有办法缩放结果图形，使其大小始终相同，而与数据网格的分辨率无关？

要重现效果，请尝试将下面的代码复制到例如 https://jsfiddle.net/ 的 HTML 窗口中，然后调整第 31 行和第 31 行中的变量 x_res 和 y_res 32 从 310 到 31。我在下面附上了预期结果的数字：

<!DOCTYPE html>
<html>

  <head>
    <meta name="description" content="math.js | basic usage">
    <title>math.js | basic usage</title>
    <script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
    
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>
    <script src="https://d3js.org/d3-contour.v1.min.js"></script>
  </head>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

  <body>
    <script>

      // helper function to output formatted results.
      function print(value) {
        var precision = 14;
        document.write(math.format(value,precision) + '<br>');
      }
      
      
      // =============================================================================
      // PLOT THE CONTOURS
      // =============================================================================

      // Define a regular grid with 11 rows and 11 columns
      var x_res = 310;
      var y_res = 310;
      
      var z         = [];
      for (i = 0; i < y_res; i++) {
        for (j = 0; j < x_res; j++) {
          z.push(j)
        }
      }

      // set the dimensions and margins of the graph
      var margin = {top: 20,right: 30,bottom: 20,left: 30},width = 460 - margin.left - margin.right,height = 460 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svg = d3.select("#my_dataviz")
        .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 + ")");

     // Add X axis
      var x = d3.scaleLinear()
        .domain([0,1])
        .range([ 0,x_res ]);
      svg.append("g")
        .attr("transform","translate(0," + y_res + ")")
        .call(d3.axisBottom(x));

      // Add Y axis
      var y = d3.scaleLinear()
        .domain([0,1])
        .range([ y_res,0 ]);
      svg.append("g")
        .call(d3.axisLeft(y));

      // Get the contour thresholds
      var thresholds = [];
      for (i = 0; i < 51; i++) {
                thresholds.push(i/50*y_res)
      }
        
      var densityData = d3.contours()
        .size([y_res,x_res])
        .thresholds((thresholds))
        (z);

      // Add the contour: several "path"
      svg
        .selectAll("path")
        .data(densityData)
        .enter()
        .append("path")
          .attr("d",d3.geoPath())
          .attr("fill","none")
          .attr("stroke","#69b3a2")
          .attr("stroke-linejoin","round")
      

    
    </script>
  </body>

</html>

HTML/Javascript D3.js 等高线图按分辨率缩放？

如何解决HTML/Javascript D3.js 等高线图按分辨率缩放？

相关推荐