Question

我把照片放在酒吧的顶部。但是具有最高价值的酒吧的形象被削减了。如何放大图形或我可以做什么以便不裁剪图像。

（我对svg和d3.js不熟练） https://jsfiddle.net/htyu6uLo/

   var aColoresChart=["#5DD255","#D4D4D4","#EA4335"];
    var chart = c3.generate({
      bindto: '#chart',
      data: {
          columns: [
                [1,5,6,7]
          ],
          color: function(color, d) {
             return aColoresChart[d.index];
          },
          type: 'bar',
          labels: true, //to display the labels in the bar chart
          bar: {
                width: {
                    ratio: 0.5 // this makes bar width 50% of length between ticks
                }
          }
      },
      size: {
                height: 235
            },
            bar: {
                width: 35
            },
            padding: {
                left: 40
            },
          tooltip: {
            show: false
          },
          legend: {
            show: false
          },
          axis: {
          x: {
              type: 'category',
              categories: ['one','two', 'three']
          },
          y:{
            tick: {
              format: d3.format('f'),
              count:7
            }
          }
      },
  });


  d3.selectAll('#chart .c3-texts text.c3-text')
    .each(function(d,i){

      var barposition= d3.select(this);
      d3.select('#chart .c3-texts').append('image')
        .attr("xlink:href", 'https://image.freepik.com/free-icon/happy-emoticon_318-40206.jpg')
        .attr("x", function(){ return barposition.attr('x')-20; } )
        .attr("y", function(){ return barposition.attr('y')-47; })
        .attr('text-anchor','middle')
        .attr('class','topimage')
        .attr("width", 50)
        .attr("height", 50);
  });

Answer 1

在轴

中提供max

在您的情况下数据： columns: [ [1,5,6,7] //here 7 is max ],

所以如果你在

中给出最多10个

   y:{
        max: 10,//give it a higher max number than the data max we have.
        tick: {
          format: d3.format('f'),
          count:7
        }
      }

工作样本here

退出svg时会裁剪图像

1 个答案: