条形图中的条形值显示不低

时间:2019-08-22 06:10:28

标签: angular d3.js

条形图不显示图表中低值的条形。

条形图不显示图表中低值的条形。例如,具有16、100000002、21030404020、3020291020之类的值。然后,除值16以外的所有条都显示出来。

var data = [
{"code": "China", "value": 4}, 
{"code": "UK", "value": 17016}, 
{"code": "Japan", "value": 256536955}, 
{"code": "USA", "value": 29740072}
]

var margin = { top: 4, right: 80, bottom: 30, left: 30 };
    const width = 1200 - (margin.left + 30) - margin.right;
    const height = 600 - margin.top - margin.bottom;
    let x: any;
 if(id === 'currrencySvg') {
    x =d3.scaleBand().rangeRound([0, width]).padding(0.81);
 } else {
    x = d3.scaleBand().rangeRound([0, width]).padding(0.91);
 }
   var leastValue = parseFloat(4);
   var highestVal = parseFloat(256536955);
    let labels = [];
    x.domain(res.map(function (d) { 
      labels.push(d['code']);
      return d['code']; 
    }));
    const rangeVal = this.getStepVal(leastValue, highestVal, 10);
    const y = d3.scaleLinear().domain([rangeVal['low'], rangeVal['high']]).range([height, 0]);
    const chart = d3.select('#barchart')
      .append('g')
      .attr('transform', 'translate(' + (margin.left + 50) + ',' + margin.top + ')');

    let xAxis: any;
    xAxis = d3.axisBottom(x).tickSizeOuter(0);
    const self = this;
    const yAxis = d3.axisLeft(y).tickFormat(function(d) { 
      return self.valueToMillions(d);
    }).tickSizeOuter(0);
    chart.append('g').call(yAxis);
    chart.append('g').attr('transform', 'translate(0,' + height + ')').call(xAxis);

    let tooltip = d3.select("body").append("div").attr("class", "toolTip");

    chart.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - (margin.left + 43))
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
      .attr("class", "chartYaxisText")
      .style("text-anchor", "middle")
      .text('Spend');
    // bar chart
    let bar = chart.selectAll("rect")
      .data(res)
      .enter().append("g");

    bar.append("rect")
      .attr("class", "barGraph")
      .attr("width", 20)
      .attr("x", function (d, i) {
        return x(labels[i]);
      })
      .attr("y", function (d, i) {
        return y(d['value']);
      })
      .attr("height", function (d, i) { return height - y(d['value']); });

酒吧应该为中国作图。

0 个答案:

没有答案