为什么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中，

  

无论方向如何，轴始终在原点处渲染。

在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>