d3 v4折线图数据

Question

我想将此折线图示例与新格式数据一起使用。

https://codepen.io/sky790312/pen/EbdRNb

旧数据格式和x轴：

  const DATA1 = [9.5, 2, 5, 7, 5, 3, 0];
  const LABELS = [
    'monday',
    'tuesday',
    'wednesday',
    'thursday',
    'friday',
    'saturday',
    'sunday'
  ];

新数据格式：：

  // parse the date / time
  const parseDate = d3.timeParse('%Y%m%d')
  const formatTime = d3.timeFormat('%y/%m/%d')

  const data = [
    {dataX: '20171016', dataY: 54.13},
    {dataX: '20171017', dataY: 50.13},
    {dataX: '20171018', dataY: 70.13},
    {dataX: '20171019', dataY: 53.98}]
  data.map(d => {
    d.dataX = parseDate(d.dataX)
    d.dataY = +d.dataY
  })

但是新格式仍然面临一些问题。

Answer 1

您需要将比例从scaleBand更改为timeScale然后根据新数据集进行更改。

 const graphContainer = d3.select(".d3--line"); const svg = d3.select("svg"); const margin = { top: 50, right: 50, bottom: 50, left: 50 }; const duration = 500; let width, height, innerWidth, innerHeight; let xScale, yScale; const parseDate = d3.timeParse("%Y%m%d"); const formatTime = d3.timeFormat("%y/%m/%d"); const data = [ { dataX: "20171016", dataY: 54.13 }, { dataX: "20171017", dataY: 50.13 }, { dataX: "20171018", dataY: 70.13 }, { dataX: "20171019", dataY: 53.98 } ]; data.map(d => { d.dataX = parseDate(d.dataX); d.dataY = +d.dataY; }); (function init() { getDimentions(); getScaleDomains(); getScaleRanges(); renderGraph(data); })(); d3.select(window).on("resize", resize); function resize() { destroyGraph(); getDimentions(); getScaleRanges(); renderGraph(data); } function renderGraph(data) { const line = d3 .line() .x((d, i) => xScale(d.dataX)) .y(d => yScale(d.dataY)) .curve(d3.curveCatmullRom.alpha(0.5)); const area = d3 .area() .x((d, i) => xScale(d.dataX)) .y0(innerHeight) .y1(d => yScale(d.dataY)) .curve(d3.curveCatmullRom.alpha(0.5)); const xAxis = d3.axisBottom(xScale).tickFormat((d, i) => formatTime(d)).ticks(4); const yAxis = d3.axisLeft(yScale).ticks(4); svg.attr("width", width).attr("height", height); const inner = svg.selectAll("g.inner").data([null]); inner.exit().remove(); inner .enter() .append("g") .attr("class", "inner") .attr("transform", `translate(${margin.top}, ${margin.right})`); const horizontalLineGroup = svg .selectAll("g.inner") .selectAll(".line-group") .data([null]); horizontalLineGroup.exit().remove(); horizontalLineGroup .enter() .append("g") .attr("class", "line-group"); const horizontalLine = svg .selectAll("g.line-group") .selectAll(".grid-line") .data(yScale.ticks(4)); horizontalLine.exit().remove(); horizontalLine .enter() .append("line") .attr("class", "grid-line") .attr("x1", 0) .attr("x2", innerWidth) .attr("y1", d => yScale(d)) .attr("y2", d => yScale(d)); const xa = svg .selectAll("g.inner") .selectAll("gxaxis") .data([null]); xa.exit().remove(); xa .enter() .append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${innerHeight})`) .call(xAxis); const ya = svg .selectAll("g.inner") .selectAll("gyaxis") .data([null]); ya.exit().remove(); ya .enter() .append("g") .attr("class", "y axis") .call(yAxis); const pathLine1 = svg .selectAll("g.inner") .selectAll(".path-line1") .data([null]); pathLine1.exit().remove(); pathLine1 .enter() .append("path") .attr("class", "path-line path-line1") .attr("d", () => line(createZeroDataArray(data))) .transition() .duration(duration) .ease(d3.easePoly.exponent(2)) .attr("d", line(data)); const pathArea1 = svg .selectAll("g.inner") .selectAll(".path-area1") .data([null]); pathArea1.exit().remove(); pathArea1 .enter() .append("path") .attr("class", "path-area path-area1") .attr("d", () => area(createZeroDataArray(data))) .transition() .duration(duration) .ease(d3.easePoly.exponent(2)) .attr("d", area(data)); } function destroyGraph() { svg.selectAll("*").remove(); } function getDimentions() { width = graphContainer.node().clientWidth; height = 500; innerWidth = width - margin.left - margin.right; innerHeight = height - margin.top - margin.bottom; } function getScaleRanges() { xScale.range([0, innerWidth]); yScale.range([innerHeight, 0]).nice(); } function getScaleDomains() { xScale = d3.scaleTime().domain(d3.extent(data, a => a.dataX)); yScale = d3.scaleLinear().domain([0, d3.max(data, a=>a.dataY)]); } function createZeroDataArray(arr) { const newArr = []; arr.forEach((item, index) => (newArr[index] = { dataX: new Date(), dataY: 0 })); return newArr; } console.log("refres h"); 

 .d3 { box-shadow: 0 0 0 1px #eee; box-sizing: border-box; } path, line { fill: none; shape-rendering: crispEdges; stroke: #E8E8E8; } .path-line { shape-rendering: initial; } .path-line.path-line1 { stroke: #0baadd; } .path-line.path-line2 { stroke: #47cf73; } .path-area { stroke: none; } .path-area.path-area1 { fill: rgba(11, 170, 221, 0.7); stroke: rgba(11, 170, 221, 0.7); } .path-area.path-area2 { fill: rgba(71, 207, 115, 0.55); stroke: rgba(71, 207, 115, 0.55); } .tick text { font-family: sans-serif; font-size: 10px; fill: #999; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script> <div class="d3 d3--line"> <svg class="line-graph"></svg> </div> 

Answer 2

您必须使用d3.scaleTime作为x轴： https ://bl.ocks.org/d3indepth/8948c9936c71e63ef2647bc4cc2ebf78，然后在将属性与数据值绑定时，您必须使用：

xScale(d.dataX)

代替 ：

xScale(LABELS[i])

y值使用相同

d => yScale(d.dataY)

代替

d => yScale(d)