javascript - 为什么 D3.js 不显示任何内容？ (RoR申请)

Question

我正在学习 D3.js 以替换我的应用程序中的 Highcharts，因此它可以在 GPL 许可证下发布。我一定错过了一些非常愚蠢的东西，因为我无法让它显示最少的元素，而是文本。

首先，显示 D3 文本效果很好。这是我的页面的结尾:

        ...
        <div class="row">
          <div class="col-md-6">
            <div id="progression">
            </div>
          </div>
          <div class="col-md-6">
            <div id="impact">
            </div>
          </div>
        </div>
  <!-- End of page -->
        
  <script>
      
      // Drawing progression
      d3.select("#progression").append("p").text("Progression");
      // Drawing impact
      d3.select("#impact").append("p").text("Impact");
  
  </script>

它按照预期正确显示了“进展”和“影响”一词。

现在我尝试根据 Intro do D3.js 中的示例绘制一个轴

        ...
        <div class="row">
          <div class="col-md-6">
            <div id="progression">
            </div>
          </div>
          <div class="col-md-6">
            <div id="impact">
            </div>
          </div>
        </div>
  <!-- End of tab content -->
  
  <script>
      
      // Drawing progression
      var x = d3.scaleLinear()
      .domain([0,10])
      .range([0,200]);
  
      var xAxis = d3.axisTop(x)
      .ticks(10);
      
      var graph =  d3.select('#progression')
      .append('svg')
      .attr('width', 300)
      .attr('height', 150);
      
      graph.append('g')           
      .attr('class', 'x axis')   
      .call(xAxis); 
     
      // Drawing impact
      d3.select("#impact").append("p").text("Impact");
  
  </script>

在这种情况下，DIV 中不会创建任何内容，甚至不再显示“Impact”一词。

我做错了什么？感谢您的帮助!

Answer 1

在 D3 中，

regardless of orientation, axes are always rendered at the origin.

在 SVG 中，原点 (0,0) 位于左上角。

所以，你必须把它翻译下来:

graph.append('g') 
    .attr("transform", "translate(0,130)")

这是包含您的代码的演示:

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="row">
    <div class="col-md-6">
        <div id="progression">
        </div>
    </div>
    <div class="col-md-6">
        <div id="impact">
        </div>
    </div>
</div>
<!-- End of tab content -->

<script>
    // Drawing progression
    var x = d3.scaleLinear()
        .domain([0, 10])
        .range([0, 200]);

    var xAxis = d3.axisTop(x)
        .ticks(10);

    var graph = d3.select('#progression')
        .append('svg')
        .attr('width', 300)
        .attr('height', 150);

    graph.append('g')
        .attr('class', 'x axis')
        .attr("transform", "translate(0,130)")
        .call(xAxis);

    // Drawing impact
    d3.select("#impact").append("p").text("Impact");
</script>