javascript - 时间总是成为纪元时间并且超出域范围

Question

我有这种JSON

{"Arsitek":[{"tanggal":"2015-01-01","jumlah":286},{"tanggal":"2015-02-01","jumlah":601},{"tanggal":"2015-03-01","jumlah":845},{"tanggal":"2015-04-01","jumlah":550},{"tanggal":"2015-05-01","jumlah":500},{"tanggal":"2015-06-01","jumlah":201},{"tanggal":"2015-07-01","jumlah":73},{"tanggal":"2015-08-01","jumlah":503},{"tanggal":"2015-09-01","jumlah":884},{"tanggal":"2015-10-01","jumlah":782},{"tanggal":"2015-11-01","jumlah":393},{"tanggal":"2015-12-01","jumlah":150}],"DKV":[{"tanggal":"2015-01-01","jumlah":94},

我正在使用 fetch API，然后将 JSON 传递给这段代码

function perbulan(dataset,target,terlambat){
//if(terlambat)target+='Terlambat'
document.getElementById(target).innerHTML=''
let width = 1100,height = 650
let color = d3.scaleOrdinal().range(['#334455', '#6c1f22', '#e3e8e1', '#6b112f', '#3C2F77',
                                    '#123456', '#22c1f6', '#3e7e9e', '#b6f121', '#32C6EA',
                                    '#A60F2B', '#648C85', '#B3F2C9', '#528C18', '#C3F25C',
                                    '#6Af0B2', '#46C858', '#3B2F9C', '#25C881', '#3C2FC5',
                                    '#8A23B1', '#2A81B3', '#BADCFE', '#917355', '#A1B9F5'])

let parsetime = d3.timeParse("%Y-%m-%d")
let svg = d3.select(`#${target}`)
            .append('svg')
            .attr('width', width)
            .attr('height', height)

let xS = d3.scaleTime()
let yS = d3.scaleLinear()
let valueline = d3.line().x(d=>d.tanggal).y(d=>d.jumlah)

let axis=true;
Object.keys(dataset).forEach((data,i)=>{
    let res=dataset[data].map(x=>({'jumlah':+x.jumlah,'tanggal':parsetime(x.tanggal)}))
    //console.log(res)
    xS.domain([d3.min(res, d=>d.tanggal),d3.max(res, d=>d.tanggal)]).range([100,1000])
    yS.domain([0,d3.max(res, d=>d.jumlah)]).range([600,20])

    svg.append("path")   
        .datum(res)
        .attr("d", valueline)
        .attr("class","line")
        .style("stroke", color(i))//change to iterator later
        
    if(axis){
        svg.append('g')
            .attr("transform", "translate(0,600)")
            .call(d3.axisBottom(xS))
        svg.append("g")
            .attr("transform", "translate(100,-1)")
            .call(d3.axisLeft(yS))
        axis=false
    }
})
}

但是该行不会显示，而是当我检查它显示的元素时:

<path d="M1420045200000,286L1422723600000,601L1425142800000,845L1427821200000,550L1430413200000,500L1433091600000,201L1435683600000,73L1438362000000,503L1441040400000,884L1443632400000,782L1446310800000,393L1448902800000,150" class="line" style="stroke: rgb(51, 68, 85);"></path>

当我突出显示它时，该线位于坐标 28857700000x811，因此它超出了范围。

我尝试手动使用 new Date(d.tanggal)，但它什么也没做。 有什么想法吗？

Answer 1

你必须使用你的秤。现在，线生成器中没有刻度:

let valueline = d3.line().x(d=>d.tanggal).y(d=>d.jumlah)

取而代之的是:

let valueline = d3.line().x(d => xS(d.tanggal)).y(d => yS(d.jumlah))
//scales here--------------------^---------------------^

这是您的代码，仅进行了更改:

var dataset = {
  "Arsitek": [{
    "tanggal": "2015-01-01",
    "jumlah": 286
  }, {
    "tanggal": "2015-02-01",
    "jumlah": 601
  }, {
    "tanggal": "2015-03-01",
    "jumlah": 845
  }, {
    "tanggal": "2015-04-01",
    "jumlah": 550
  }, {
    "tanggal": "2015-05-01",
    "jumlah": 500
  }, {
    "tanggal": "2015-06-01",
    "jumlah": 201
  }, {
    "tanggal": "2015-07-01",
    "jumlah": 73
  }, {
    "tanggal": "2015-08-01",
    "jumlah": 503
  }, {
    "tanggal": "2015-09-01",
    "jumlah": 884
  }, {
    "tanggal": "2015-10-01",
    "jumlah": 782
  }, {
    "tanggal": "2015-11-01",
    "jumlah": 393
  }, {
    "tanggal": "2015-12-01",
    "jumlah": 150
  }]
};

let width = 1100,
  height = 650
let color = d3.scaleOrdinal().range(['#334455', '#6c1f22', '#e3e8e1', '#6b112f', '#3C2F77', '#123456', '#22c1f6', '#3e7e9e', '#b6f121', '#32C6EA', '#A60F2B', '#648C85', '#B3F2C9', '#528C18', '#C3F25C', '#6Af0B2', '#46C858', '#3B2F9C', '#25C881', '#3C2FC5', '#8A23B1', '#2A81B3', '#BADCFE', '#917355', '#A1B9F5'])

let parsetime = d3.timeParse("%Y-%m-%d")
let svg = d3.select("body")
  .append('svg')
  .attr('width', width)
  .attr('height', height)

let xS = d3.scaleTime()
let yS = d3.scaleLinear()
let valueline = d3.line().x(d => xS(d.tanggal)).y(d => yS(d.jumlah))

let axis = true;
Object.keys(dataset).forEach((data, i) => {
  let res = dataset[data].map(x => ({
      'jumlah': +x.jumlah,
      'tanggal': parsetime(x.tanggal)
    }))
    //console.log(res)
  xS.domain([d3.min(res, d => d.tanggal), d3.max(res, d => d.tanggal)]).range([100, 1000])
  yS.domain([0, d3.max(res, d => d.jumlah)]).range([600, 20]);

  svg.append("path")
    .datum(res)
    .attr("d", valueline)
    .attr("class", "line")
    .style("stroke", color(i)) //change to iterator later

  if (axis) {
    svg.append('g')
      .attr("transform", "translate(0,600)")
      .call(d3.axisBottom(xS))
    svg.append("g")
      .attr("transform", "translate(100,-1)")
      .call(d3.axisLeft(yS))
    axis = false
  }
})

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

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