javascript - d3.js 将底部轴线延伸至原点

Question

我想将第一个刻度与原点隔开，但也想用一条线连接它们。我想我可以附加一个 svg 来为我做这件事，但必须有一个更简单的方法，我在文档中丢失了。可以找到我的目标图像示例 here

这是我遇到的问题的示例:

var margin = {
      top: 20,
      right: 10,
      bottom: 40,
      left: 40
     };
    
     var padding = 20;
    
     var height = 100;
     var width = 400
    
      var xAxisTimeScale = [];
    
      for(var i = 8; i < 21; i++) {
       xAxisTimeScale.push(i);
      }
    
      // scales
      var xScale = d3.scaleLinear()
      .domain([0, 12])
      .range([padding, width - padding]);
    
      var yScale = d3.scaleLinear()
      .domain([0, 10])
      .range([height, 0]);
    
     function convertTimeToString(time) {
      if(time > 12) {
       return (time - 12) + "PM";
      } else {
       return time + "AM";
      }
     }
    
     var xAxis = d3.axisBottom(xScale)
     .ticks(13)
     .tickFormat(function(d,i){ return convertTimeToString(xAxisTimeScale[i]);});
    
     var yAxis = d3.axisLeft(yScale);
    
     var svg = d3.select("body").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 axes
     svg.append('g')
     .call(yAxis);
    
     svg.append('g')
     .attr('transform', 'translate(0, ' + height + ')')
     .call(xAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>

Answer 1

以下是我想出的方法:

1. 将 x 轴的 path 的 d 属性更改为 'M0,0.5V0.5H'+(width-padding) .相关代码改动:

   svg.select('.x.axis path.domain').attr('d', function() {
       return 'M0,0.5V0.5H'+(width-padding);
   });
   

   我是怎么想出 0.5 的？我分析了d3.js并遇到了用于创建 X 轴域的 V0.5(在 d3-version3 中是 V0。有关如何使用的更多详细信息路径已形成，查看 SVG path d attribute 。使用此偏移量，这是实现相同的代码片段:

   var margin = {
         top: 20,
         right: 10,
         bottom: 40,
         left: 40
        };
       
        var padding = 20;
       
        var height = 100;
        var width = 400
       
         var xAxisTimeScale = [];
       
         for(var i = 8; i < 21; i++) {
          xAxisTimeScale.push(i);
         }
       
         // scales
         var xScale = d3.scaleLinear()
         .domain([0, 12])
         .range([padding, width - padding]);
       
         var yScale = d3.scaleLinear()
         .domain([0, 10])
         .range([height, 0]);
       
        function convertTimeToString(time) {
         if(time > 12) {
          return (time - 12) + "PM";
         } else {
          return time + "AM";
         }
        }
       
        var xAxis = d3.axisBottom(xScale)
        .ticks(13)
        .tickFormat(function(d,i){ return convertTimeToString(xAxisTimeScale[i]);});
       
        var yAxis = d3.axisLeft(yScale);
       
        var svg = d3.select("body").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 axes
        svg.append('g')
        .call(yAxis);
       
        svg.append('g').classed('x axis', true)
        .attr('transform', 'translate(0, ' + height + ')')
        .call(xAxis);
        
        svg.select('.x.axis path.domain').attr('d', function() {
        		return 'M0,0.5V0.5H'+(width-padding);
        });

   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>

2. 使用简单的行代码从 X 轴的 origin 明确添加一条线到 start-point。相关代码改动:

   svg.append('line').classed('connecting-line', true)
   .attr('y1', height+0.5).attr('y2', height+0.5).attr('x1', 0).attr('x2', padding).style('stroke', '#000');
   

   0.5 道理同上。其余属性仅基于高度和宽度。这是实现此功能的代码片段:

   var margin = {
         top: 20,
         right: 10,
         bottom: 40,
         left: 40
        };
       
        var padding = 20;
       
        var height = 100;
        var width = 400
       
         var xAxisTimeScale = [];
       
         for(var i = 8; i < 21; i++) {
          xAxisTimeScale.push(i);
         }
       
         // scales
         var xScale = d3.scaleLinear()
         .domain([0, 12])
         .range([padding, width - padding]);
       
         var yScale = d3.scaleLinear()
         .domain([0, 10])
         .range([height, 0]);
       
        function convertTimeToString(time) {
         if(time > 12) {
          return (time - 12) + "PM";
         } else {
          return time + "AM";
         }
        }
       
        var xAxis = d3.axisBottom(xScale)
        .ticks(13)
        .tickFormat(function(d,i){ return convertTimeToString(xAxisTimeScale[i]);});
       
        var yAxis = d3.axisLeft(yScale);
       
        var svg = d3.select("body").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 axes
        svg.append('g')
        .call(yAxis);
       
        svg.append('g').classed('x axis', true)
        .attr('transform', 'translate(0, ' + height + ')')
        .call(xAxis);
     
     	svg.append('line').classed('connecting-line', true)
       	.attr('y1', height+0.5).attr('y2', height+0.5).attr('x1', 0).attr('x2', padding).style('stroke', '#000');

   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>

3. 添加一个叠加矩形作为框 或作为使用stroke-dasharray 样式化的矩形。但我认为这不会那么有用，因为它会有点压倒一切。

希望以上任何一种方法都能达到目的。我真的很抱歉没有按时回来(周五晚上让我):)