Question

我正在尝试在d3.js中创建坡度图。一切工作正常，除了事实是，即使在利润率为0的情况下，我的图表的左侧仍有一个神秘的利润。

我尝试使用$("svg").css({top: 0, left: 0, position:'absolute'});。但是我的可视化依赖于鼠标悬停事件，这似乎打破了它。

index.html

<!doctype html>
<html>
  <head>
    <title>Test</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- jQuery and lodash -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

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

    <!-- Our visualization code -->
    <script src="slopegraph.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- Our d3.js visualization will appear in #chart -->
      <div id="chart" align="left"></div>
    </div>
  </body>

</html>

slopegraph.js


// Using jQuery, read our data and call visualize(...) only once the page is ready:
$(function() {
  visualize()
});


var visualize = function() {
  // Boilerplate:
  var margin = { top: 100, right: 0, bottom: 50, left: 65 },
     width = 1800 - margin.left - margin.right,
     height = 1080 - margin.top - margin.bottom,
     labelLength = 50, chartWidth = 600;
  var leftScale = d3.scaleLinear()
      .domain([0.0, 2000])
      .range([height - margin.top, margin.bottom]);

  var svg = d3.select("#chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("align","left")
    .style("width", width + margin.left + margin.right)
    .style("height", height + margin.top + margin.bottom)
    .append("g");

  var leftAxis = d3.axisLeft()
                  .scale(leftScale);


   svg.append("g")
       .call( leftAxis );

};

当前，左轴已切断，我不确定如何解决。

Here是带有代码的jsfiddle

即使边距设置为0，d3.js中的神秘填充

0 个答案: