javascript - 带有 scaleTime 的 D3 JS 条形图

Question

我正在尝试使用带有 d3.scaleTime() 刻度的 d3.js 绘制条形图。我尝试搜索，但没有在 d3 v4 中找到更好的示例。所以决定构建一个，但我认为我为 monthScale 指定的 domain 存在一些问题，它为条形图提供了一些奇怪的绘图。任何形式的帮助将不胜感激。此外，此时我正在尝试按月对 x 轴进行分组(它可以是动态的，具体取决于数据的大小；按周/天/年分组)。

var temperatures = [{
    temp: 80,
    onDate: '2016-01-01T16:00:49Z'
  },
  {
    temp: 38,
    onDate: '2016-02-01T16:00:49Z'
  },
  {
    temp: 47,
    onDate: '2016-05-01T16:00:49Z'
  },
  {
    temp: 59,
    onDate: '2017-01-01T16:00:49Z'
  },
];

var months = temperatures.map(function(t) {
  return new Date(t.onDate);
});
var maxDate = Math.max(...months);
var minDate = Math.min(...months);

var margin = {
  top: 5,
  right: 5,
  bottom: 50,
  left: 50
};

var fullWidth = 700;
var fullHeight = 200;

var width = fullWidth - margin.left - margin.right;
var height = fullHeight - margin.bottom - margin.top;

var svg = d3.select('.chart')
  .append('svg')
  .attr('width', fullWidth)
  .attr('height', fullHeight)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// Vertical bars
var monthScale = d3.scaleTime()
  .domain([minDate, maxDate])
  .rangeRound([0, width]);

var tempScale = d3.scaleLinear()
  .domain([0, d3.max(temperatures, function(d) {
    return d.temp;
  })])
  .range([height, 0])
  .nice();

var barHolder = svg.append('g')
  .classed('bar-holder', true);

var bars = barHolder.selectAll('rect.bar')
  .data(temperatures)
  .enter()
  .append('rect')
  .classed('bar', true)
  .attr('x', function(d, i) {
    ndt = new Date(d.onDate)
    return monthScale(ndt.getTime());
  })
  .attr('width', width / months.length)
  .attr('y', function(d) {
    return tempScale(d.temp);
  })
  .attr('height', function(d) {
    return height - tempScale(d.temp);
  });
// Vertical bars end

// scales
var xAxis = d3.axisBottom(monthScale)
  .scale(monthScale)
  .ticks(d3.timeWeeks(minDate, maxDate).length)
  .tickSizeOuter(1);
var yAxis = d3.axisLeft(tempScale)
  .tickSizeOuter(1);

svg.append('g')
  .classed('x axis', true)
  .attr('transform', 'translate(0,' + height + ')')
  .call(xAxis);

var yAxisElement = svg.append('g')
  .classed('y axis', true)
  .call(yAxis);
yAxisElement.append('text')
  .attr('transform', 'rotate(-90) translate(-' + height / 2 + ', 0)')
  .style('text-ancher', 'middle')
  .attr('dy', '-2.5em')
  .text('Farenheit');

.chart {
  background-color: white;
}

.chart rect {
  stroke: white;
  fill: steelblue;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis line {
  stroke: black;
}

.y.axis line {
  stroke: black;
}

.axis text {
  font-size: 12px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="col-lg-12 chart">
</div>

Answer 1

我只是想在我的回答前加上您通常不应该将 d3.scaleTime 用于条形图，但如果您出于某种原因绝对必须这样做，我会这样做.

d3 有一个针对您的日期类型的内置日期解析器，名为 d3.utcParse("%Y-%m-%dT%H:%M:%SZ");

这大大简化了您的代码，我们在 forEach 循环中使用此解析器，如下所示

d.onDate = parseDate(d.onDate);

以下代码允许我们填充 xAxis，以便我们可以看到更多的条形图并相应地调整矩形

var minDate = d3.min(temperatures, function(d) { 
      return d.onDate.getTime(); 
    }),
    maxDate = d3.max(temperatures, function(d) { 
      return d.onDate.getTime(); 
    }),
    padding = (maxDate - minDate) * .1;

这里是你所有的代码和这些变化

var parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%SZ");

var temperatures = [{
    temp: 80,
    onDate: '2016-01-01T16:00:49Z'
  },
  {
    temp: 38,
    onDate: '2016-02-01T16:00:49Z'
  },
  {
    temp: 47,
    onDate: '2016-05-01T16:00:49Z'
  },
  {
    temp: 59,
    onDate: '2017-01-01T16:00:49Z'
  },
];

temperatures.forEach(function(d) {
  d.onDate = parseDate(d.onDate);
  console.log(d.onDate)
  return d;
})

var margin = {top: 25, right: 35, bottom: 25, left: 35, padd: 15};

var fullWidth = 600;
var fullHeight = 250;

var width = fullWidth - margin.left - margin.right;
var height = fullHeight - margin.bottom - margin.top;

var svg = d3.select('.chart').append('svg')
    .attr('width', fullWidth)
    .attr('height', fullHeight)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var minDate = d3.min(temperatures, function(d) { 
      return d.onDate.getTime(); 
    }),
    maxDate = d3.max(temperatures, function(d) { 
      return d.onDate.getTime(); 
    }),
    padding = (maxDate - minDate) * .1;

var x = d3.scaleTime()
      .rangeRound([0, width])
      .domain([minDate - padding, maxDate + padding]);

var y = d3.scaleLinear()
      .range([height, 0])
      .domain([0, d3.max(temperatures, function(d) {
        return d.temp;
      })]);

var xAxis = d3.axisBottom(x)
      .tickSizeOuter(0)
      .tickFormat(d3.timeFormat("%b")),
    yAxis = d3.axisLeft(y);

svg.append("g")
    .attr("class","axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("fill", "#000")
    .text("Farenheit");

var bars = svg.selectAll('.bar')
    .data(temperatures)
    .enter()
  .append('rect')
    .attr("class", "bar")
    .attr('width', (width - margin.padd) / (temperatures.length * temperatures.length))
    .attr('height', function(d) {
        return height - y(d.temp);
    })
    .attr('x', function(d) {
        return x(d.onDate) - margin.padd
    })
    .attr('y', function(d) {
        return y(d.temp);
    })

.chart {
  background-color: white;
}

.chart rect {
  stroke: white;
  fill: steelblue;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis line {
  stroke: black;
}

.y.axis line {
  stroke: black;
}

.axis text {
  font-size: 12px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="col-lg-12 chart">
</div>