D3 shift ticks與軸對齊

Question

我試圖創建一個顯示每月數據的d3折線圖。圖表繪製出來，但x軸上的滴答移動並且不與繪製的數據點對齊。正如您從屏幕截圖中可以看到的那樣，刻度從數據點右移。

我試着找出如何轉換翻譯蜱但沒有運氣。謝謝！

下面是截圖。 這裏是我的代碼：

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

 
// set the ranges 
 
var x = d3.scaleBand().range([0, width]); 
 
var y = d3.scaleLinear().range([height, 0]); 
 

 
// define the line 
 
var valueline = d3.line().x(function(d) { return x(d.month); }) 
 
    .y(function(d) { return y(d.average); }); 
 

 
// append the svg obgect to the body of the page 
 
// appends a 'group' element to 'svg' 
 
// moves the 'group' element to the top left margin 
 
var svg = d3.select("#chart") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
.append("g") 
 
    .attr("transform", 
 
     "translate(" + margin.left + "," + margin.top + ")"); 
 

 
// Get the data 
 
var data = [{"month":"january","average":0},{"month":"february","average":0},{"month":"march","average":0},{"month":"april","average":9.0},{"month":"may","average":892.0},{"month":"june","average":10.0},{"month":"july","average":92.0},{"month":"august","average":9281.0},{"month":"september","average":8402.0},{"month":"october","average":823213.0},{"month":"november","average":82.0},{"month":"december","average":0}]; 
 

 
x.domain(data.map(function(d) { return d.month; })); 
 
y.domain([0, d3.max(data, function(d) { return d.average; })]); 
 

 

 
// Add the valueline path. 
 
console.log(valueline); 
 
svg.append("path") 
 
    .data([data]) 
 
    .attr("class", "line") 
 
    .attr("d", valueline); 
 

 
// Add the X Axis 
 
svg.append("g") 
 
    .attr("class", "e4rAxis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(d3.axisBottom(x)) 
 
    .selectAll("text") 
 
     .style("text-anchor", "end") 
 
     .attr("dx", "-.8em") 
 
     .attr("dy", ".15em") 
 
     .attr("transform", "rotate(-65)"); 
 

 
// xAxisElement.selectAll(".tick").attr("transform", "translate(0,-5)"); 
 

 
// Add the Y Axis 
 
svg.append("g") 
 
    .call(d3.axisLeft(y)); 
 

 
svg.selectAll("dot") 
 
    .data(data) 
 
    .enter().append("circle") 
 
    .attr("r", 5) 
 
    .attr("cx", function(d) { return x(d.month); }) 
 
    .attr("cy", function(d) { return y(d.average); });

.line { 
 
        fill: none; 
 
        stroke: steelblue; 
 
        stroke-width: 2px; 
 
        } 
 

 
        .axis path, .axis line { 
 
        fill: none; 
 

 
        shape-rendering: crispEdges; 
 
        } 
 

 
        .line { 
 

 
        } 
 

 
        .area { 
 
        fill: steelblue; 
 
        opacity: 0.5; 
 
        } 
 

 

 
        .dot { 
 
        fill: steelblue; 
 
        stroke: steelblue; 
 
        stroke-width: 1.5px; 
 
        }

<script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
<svg width="960" height="500" id="chart"></svg>

Answer 1

有2種方式來解決您的問題。

1. 硬代碼，並設置一些填充您的線和圓圈，使他們與你x軸對齊。

   // define the line 
       var valueline = d3.line().x(function(d) { 
        return x(d.month) + 38; //set x padding of 38 
   }) 
   .y(function(d) { 
   return y(d.average); 
       }); 
   
   svg.selectAll("dot") 
   .data(data) 
   .enter().append("circle") 
   .attr("r", 5) 
   .attr("cx", function(d) { 
       return x(d.month) + 38; 
       }) 
   .attr("cy", function(d) { 
       return y(d.average); 
       }); 
   

的jsfiddle - https://jsfiddle.net/L5dctwsz/

使用d3.scaleTime，因爲你在處理這將解決這一問題月份名稱。

將其設置如下所示：

var x = d3.scaleTime().range([0, width]); 

解析一個月，然後設置域：

// parse the date/time 
var parseMonth = d3.timeParse("%B"); 
data.forEach(function(d) { 
    d.month = parseMonth(d.month); 
}); 

x.domain(d3.extent(data, function(d) { 
    return d.month; 
})); 

的jsfiddle - https://jsfiddle.net/pm7gLn2u/