javascript - d3 中线图的 x 轴上带有额外刻度的错误日期打印

Question

我正在使用 D3 在 JavaScript 中绘制折线图。折线图的线条绘制正确，但 x 轴上的日期不正确，它还在 x 轴上显示一个额外的刻度。我也曾尝试更改刻度格式，但我失败了。我不知道我哪里做错了。请帮忙。这是我的代码

var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width 
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// The number of datapoints
var n = 4;
var xScale = d3.scaleLinear()

    .domain([0, n-1]) // input
    .range([0, width]); // output

var parseTime = d3.timeParse("%d-%b-%y");   

// 6. Y scale will use the randomly generate number 
var yScale = d3.scaleLinear()

    .domain([0, 100]) // input 
    .range([height, 0]); // output 


    d3.csv("Data_vis.csv", function(data){
   //console.log(data);

    var nov_11_percent= 22;
    var oct_16_percent= 25;
    var nov_13_percent= 24;
    var oct_22_percent= 21;

    var dataset2=[{"date":'2018-09-11', "value": nov_11_percent},
            {"date":'2018-10-16', "value": oct_16_percent},
            {"date":'2018-10-22', "value": oct_22_percent},   
            {"date":'2018-11-13', "value": nov_13_percent}];


 dataset2.forEach(function(d) {
      d.date = new Date(d.date);

  });   

var line = d3.line()
    .x(function(d, i) {
     //alert(parseTime(d.date));
    return xScale(d.date);

    }) 
    .y(function(d,i ) { 


    return yScale(d.value);

    }) 
    .curve(d3.curveMonotoneX) 

 xScale.domain(d3.extent(dataset2, function(d) { 

    return d.date; })); 

    yScale.domain([0, d3.max(dataset2, function(d) { 

    return d.value;

    })]);

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 + ")");

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")

.call(d3.axisBottom(xScale)
.ticks(4)
 .tickFormat(d3.timeFormat("%Y-%m-%d")));

svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale)); 

svg.append("path")
    .datum(dataset2) 
    .attr("class", "line") 
    .attr("d", line); 

svg.selectAll(".dot")
    .data(dataset2)
  .enter().append("circle") // Uses the enter().append() method
    .attr("class", "dot") // Assign a class for styling
    .attr("cx", function(d) { return xScale(d.date) })
    .attr("cy", function(d) { return yScale(d.value) })
    .attr("r", 10);
});

任何帮助将不胜感激。谢谢

Answer 1

使用 point scale而不是 x 的线性标度。

var xScale = d3
  .scalePoint()
  .range([0, width])
  .domain(dataset2.map(i => i.date))

const margin = { top: 50, right: 50, bottom: 50, left: 50 }
const width = window.innerWidth - margin.left - margin.right // Use the window's width
const height = window.innerHeight - margin.top - margin.bottom // Use the window's height

const dataset2 = [{ date: "2018-09-11", value: 22 },{ date: "2018-10-16", value: 25 },{ date: "2018-10-22", value: 24 },{ date: "2018-11-13", value: 21 }]

dataset2.forEach(function(d) {
  d.date = new Date(d.date)
})

// 6. Y scale will use the randomly generate number
const yScale = d3
  .scaleLinear()
  .domain([
  0,
  d3.max(dataset2, function(d) {
    return d.value
  })
  ]) // input
  .range([height, 0]) // output

const xScale = d3
  .scalePoint()
  .range([0, width])
  .domain(dataset2.map(d => d.date))

const line = d3
  .line()
  .x(function(d, i) {
    return xScale(d.date)
  })
  .y(function(d, i) {
    return yScale(d.value)
  })
  .curve(d3.curveMonotoneX)

const 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 + ")")

svg
  .append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + height + ")")
  .call(
    d3
      .axisBottom(xScale)
      .tickFormat(d3.timeFormat("%m/%d"))
  )

svg
  .append("g")
  .attr("class", "y axis")
  .call(d3.axisLeft(yScale))

svg
  .append("path")
  .datum(dataset2)
  .attr("class", "line")
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", "black")

svg
  .selectAll(".dot")
  .data(dataset2)
  .enter()
  .append("circle") // Uses the enter().append() method
  .attr("class", "dot") // Assign a class for styling
  .attr("cx", function(d) {
    return xScale(d.date)
  })
  .attr("cy", function(d) {
    return yScale(d.value)
  })
  .attr("r", 10)

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

Codepen