Question

我已使用d3创建条形图。当我用数据绘制图表时，有时上次刻度值未显示在Y轴上。有时候，所有刻度都在Y轴上具有值，但有时第一和最后一个刻度都没有值。

有关我使用过的示例代码，请参见下文。

const margin = { top: 4, right: 80, bottom: 30, left: 30 };
const width = 800- (margin.left + 30) - margin.right;
const height = 220- margin.top - margin.bottom;

let parseTime = d3.timeParse("%b-%y");
const tooltipDate = d3.timeFormat("%b-%y"), formatSuffixDecimal2 = 
d3.format(".2s");

const x = d3.scaleTime()
  .range([0, width])
  .domain(d3.extent(dates, function (d) {
    return d;
  }));

const y = d3.scaleLinear().domain([parseInt(val1), parseInt(aa)]).range([height, 0]);
const chart = d3.select('#' + id)
  .append('g')
  .attr('transform', 'translate(' + (margin.left + 20) + ',' + margin.top + ')');

 states.forEach(function (d) {
    d.Month = parseTime(d.Month);
  });
 let xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%b-%y")).ticks(d3.timeMonth, 1);
const yAxis = d3.axisLeft(y);
chart.append('g').call(yAxis);
chart.append('g').attr('transform', 'translate(0,' + height + ')').call(xAxis);

let bar = chart.selectAll("rect")
  .data(states)
  .enter().append("g");

bar.append("rect")
  .attr("class", "barGraph")
  .attr("x", function (d, i) {
    return x(d.Month);
  })
  .attr("y", function (d, i) {
    return y(d.Value);
  })
  .attr("width", 20)
  .attr("height", function (d, i) { return height - y(d.Value); });

样本数据：

let states = [
{"Month": "Mar-18", "Value": "2004.50"}, 
{"Month": "Apr-18", "Value": "2255.00"}, 
{"Month": "May-18", "Value": "2292.00"}, 
{"Month": "Jun-18", "Value": "2133.00"}, 
{"Month": "Jul-18", "Value": "2081.00"}, 
{"Month": "Aug-18", "Value": "2125.00"}, 
{"Month": "Sep-18", "Value": "2032.00"}, 
{"Month": "Oct-18", "Value": "2027.00"}, 
{"Month": "Nov-18", "Value": "1934.00"}, 
{"Month": "Dec-18", "Value": "1942.00"}, 
{"Month": "Jan-19", "Value": "1852.00"}, 
{"Month": "Feb-19", "Value": "1856.00"}]

Ticks image

Last ticks doesn't have value

Last and first ticks doesn't have values

All ticks have values

请有人帮我。

d3图表中Y轴上的最后一个刻度不显示值

0 个答案: