响应式在D3漏斗图中不起作用

Question

我尝试在所有设备中使用d3漏斗图。我使用了引导程序面板和d3漏斗图内部。创建了漏斗图，但不在响应式设备中查看。一旦我调整了设备的大小或控制台中的响应式移动设备就看不到了。 / p>

This is desktop image[enter image description here][1]

This is mobile device in console

[enter image description here][2]


  [1]: https://i.stack.imgur.com/DPrGC.png
  [2]: https://i.stack.imgur.com/RJEu8.png

Bootstrap coding

<div class="col-lg-3 col-md-3 col-sm-3">
    <div class="panel panel-primary ">
        <div class="panel-heading ">
            <h3 class="panel-title text-uppercase">Candidate By Status</h3>
        </div>
        <div class="panel-body ">
            <div class="funnelPanel">
                <div id="funnelContainer"></div>
            </div>
        </div>
    </div>
</div>

D3 Funnel coding...

var data1 = [
    ['I', 12],
    ['T', 4],
    ['L', 25],
    ['C', 15],
    ['A', 12],
    ['T', 4] 
];

const options1 = {
    chart: {
        width: 200,
        height: 450,
        bottomWidth: 1 / 2,
        bottomPinch: 1,
        curve: {
           enabled: true,
           height: 20,
           shade: -0.4
        }
    },
    block: {
        dynamicSlope: true,
        dynamicHeight: true,
        highlight: true,
        minHeight: 50,
            fill: {
                type: 'gradient',
            }
        }
    }

   const funnel = new D3Funnel("#funnelContainer");
   funnel.draw(data1, options1);

  d3.select('#funnelContainer svg')
     .attr('transform', 'translate(0)rotate(270)')

如何固定渠道图表的宽度和高度以响应所有设备。