javascript - D3.js v4.10 x 轴时间刻度和 XMLHttpRequest 数据

Question

我正在使用 D3.js 版本 4。我正在处理两个问题。首先，我通过 XMLHTPRequest 检索到数据，其中包含名称、标识该名称的数字，然后是数据。在我的 ajax 请求之后，它看起来像这样:

function initialize() {
        var xhr = new XMLHttpRequest();
        var url = "/get_daily";

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.response);
                buildCard(data);
            }
        }
         xhr.open('GET', url, true);
         xhr.send();
    }

    […]
0: {…}
daily_available: 73621931016302
daily_total: 74463845381120
daily_used: 841914364818
date: "11-30-2017"
__proto__: Object { … }
1: {…}
daily_available: 73620537623773
daily_total: 74463845381120
daily_used: 843307757347
date: "11-29-2017"
__proto__: Object { … }
2: {…}
daily_available: 73620626989231
daily_total: 74463845381120
daily_used: 843218391890
date: "11-28-2017"

__proto__: Object { … }

如何在图表上显示三行，每一行代表 daily_used、daily_total 和 daily_available？

另一个问题与 x 轴有关。下面是我的 xAxis 代码。

 var xScale = d3.scaleTime()
                .domain([
                    d3.min(dataset, function (d) {
                        return new Date(d.date.replace(/-/g, "/"));
                    }),
                    d3.max(dataset, function (d) {
                        return new Date(d.date.replace(/-/g, "/"));
                    })
                ])
                .range([padding, w]);
var xAxis = d3.axisBottom()
                       .scale(xScale)
                       .ticks(dataset.length)
                       .tickFormat(formatTime);

但是日期对齐已关闭。第一个日期/刻度太靠近 y 轴，最后一个刻度的日期被剪掉。

非常感谢任何帮助。书籍和教程似乎总是有非常简单的示例和简单的数据。

几乎...

Answer 1

这里有一个完整的解决方案和评论，希望它有用

var dataset = [
  {
    daily_available: 73621931016302,
    daily_total: 74463845381120,
    daily_used: 841914364818,
    date: "11-30-2017"
  },
  {
    daily_available: 73620537623773,
    daily_total: 74463845381120,
    daily_used: 843307757347,
    date: "11-29-2017"
  },
  {
    daily_available: 73620626989231,
    daily_total: 74463845381120,
    daily_used: 843218391890,
    date: "11-28-2017"
  }
];


// Size and margin
// You can change the values directly in an object
var margin = {top: 10, right: 50, bottom: 50, left: 100},
    width = 500 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

// you apply the scale from the size
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// xDom
// With a scaleTime you use a Date
var xDom = [
  d3.min(dataset, function (d) {
  	return new Date(d.date);
  }),
  d3.max(dataset, function (d) {
  	return new Date(d.date);
  })
];

// yDom
// concat the value to retreive the max and min in the same array
var concat = []
dataset.forEach(function(d) {
  concat.push(d.daily_available);
  concat.push(d.daily_total);
});
var spacing = 1.05; // spacing, adjust the lines at the middle with a higher domain interval
var yDom = [
  d3.min(concat) / spacing, // here, you can also put 0 or whatever to start at this one
  d3.max(concat) * spacing
];

// apply domains
x.domain(xDom);
y.domain(yDom);

// init line daily_available
var line1 = d3.line()
    .x(function(d) { return x(new Date(d.date)); })
    .y(function(d) { return y(d.daily_available); });
    
// init line daily_total
var line2 = d3.line()
    .x(function(d) { return x(new Date(d.date)); })
    .y(function(d) { return y(d.daily_total); });
    
// oops, daily_used is out of screen :(
// so you will use a trick, add the lowest value to daily_used
// (i don't know if it's what you want)
var line3 = d3.line()
    .x(function(d) { return x(new Date(d.date));  })
    .y(function(d) { return y(d.daily_used + (d3.min(concat) / spacing)); }); // it's kind of magic :)

// Now, draw the svg

// append svg in the body
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 + ")");

// draw lines

// line1
svg.append("path")
  .data([dataset])
  .attr("class", "line")
  .style("stroke", "green")
  .attr("d", line1);

// line 2
svg.append("path")
  .data([dataset])
  .attr("class", "line")
  .style("stroke", "blue")
  .attr("d", line2);

// line 3
svg.append("path")
  .data([dataset])
  .attr("class", "line")
  .style("stroke", "red")
  .attr("d", line3);

// Add the x Axis
var formatTime = d3.timeFormat("%m/%d/%Y");
var axisBottom = d3.axisBottom(x).ticks(dataset.length-1).tickFormat(formatTime)
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(axisBottom);

// Add the y Axis
var axisLeft = d3.axisLeft(y).ticks(5)
svg.append("g")
  .call(axisLeft);

// And voila !
 

.line {
  fill: none;
  stroke: gray;
  stroke-width: 0.5px;
}

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

注意:您可以使用 d3.request() 进行 ajax https://github.com/d3/d3/blob/master/API.md#requests-d3-request