使用Jquery Mobile使用固定宽度的d3js创建图表

我正在使用为移动设备创建图表。图表正在渲染，但我已经将使用d3js创建的SVG图表的宽度和高度固定为960x480。如果我不使用Jquery Mobile，图表是可缩放和可滚动的，但是如果使用Jquery Mobile的图表，则会呈现图表，但它们不可滚动和不可缩放，因此在移动设备上会剪切图表

有解决办法吗

  <div data-role="page" data-add-back-btn="true" id="areachart">
        <div data-theme="e" data-position="fixed" data-role="header"  data-id="header">
            <h3>
                Header
            </h3>
        </div>
        <div data-role="content" id="viz">
        </div>
        <div data-theme="e" data-role="footer" data-position="fixed"  data-id="footer">
            <h3>
                Footer
            </h3>
        </div>
        <script>
         var header = localStorage.getItem("chartWizHeader");
         var footer = localStorage.getItem("chartWizFooter");

        $(document).live('pageinit',function(event){



            $('#areachart div[data-role="header"] h3').text(header);
            $('#areachart div[data-role="footer"] h3').text(footer);


            d3.json(sessionStorage.getItem("areaChart"), function(data) {

                d3.select("#viz").html("");

                sessionStorage.removeItem("areaChart");
                // Data is the Final Output.

                $.each(data, function(i, d) {
                  d.Year = +d.Year;
                  d.Sales = +d.Sales;
                  d.Expenses = +d.Expenses;
                });

                //Declare Margin.
                var margin = {top:10,left:50,right:30,bottom:20};

                //Declare height and width of the SVG.
                var height = 500 - margin.bottom - margin.top;
                var width  = 970 - margin.left - margin.right;

                //Define Scaling for x and y
                var x = d3.scale.linear().domain([d3.min(data,function(d){return d.Year}),d3.max(data,function(d){return d.Year})]).range([0,width]);
                var y = d3.scale.linear().domain([0,d3.max(data,function(d){
                        if(d.Sales < d.Expenses){
                            return d.Expenses;
                        }else{
                            return d.Sales;
                        }
                    })]).range([height,0]);

                // Both axis have to be defined.
                var xAxis = d3.svg.axis().orient("bottom").scale(x).ticks(data.length);
                var yAxis = d3.svg.axis().orient("left").scale(y);

                // Create the lines.
                var line1 = d3.svg.line().x(
                        function(d){return x(d.Year);}
                ).y(function(d){return y(d.Sales);});
                var line2 = d3.svg.line().x(function(d){ return x(d.Year);}).y(function(d){return y(d.Expenses);});

                //Create the Area which has starting points.
                var area1 = d3.svg.area().x(line1.x()).y1(line1.y()).y0(y(0));

                var area2 = d3.svg.area().x(line2.x()).y1(line2.y()).y0(y(0));


                //Create the SVG Element.
                var svg = d3.select("#viz").append("svg").datum(data).attr("width",width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom)
                            .append("g").attr("transform","translate("+margin.left+","+margin.top+")");

                //Add path of area.
                svg.append("path").attr("style"," fill: lightsteelblue;fill-opacity: 0.4;").attr("d",area1);

                //Add path of area.
                svg.append("path").attr("style","fill: #00FF00;fill-opacity: 0.4;").attr("d",area2);

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

                svg.append("g").attr("class","y axis").call(yAxis);

                svg.append("path").attr("style"," fill: none;stroke: steelblue;stroke-width: 1.5px;").attr("d",line1);


                });

        });
    </script>
    </div>

标题
页脚
var header=localStorage.getItem（“chartWizHeader”）；
var footer=localStorage.getItem（“chartWizFooter”）；
$（document）.live（'pageinit'，函数（事件）{
$（'#areachart div[data role=“header”]h3'）。文本（header）；
$（'#areachart div[data role=“footer”]h3'）。文本（footer）；
json（sessionStorage.getItem（“areaChart”），函数（数据）{
d3.选择（“#viz”）.html（“”）；
sessionStorage.removeItem（“区域图”）；
//数据是最终输出。
$。每个（数据、函数（i、d）{
d、 年份=+d.Year；
d、 销售额=+d.销售额；
d、 费用=+d.费用；
});
//申报保证金。
var-margin={顶部：10，左侧：50，右侧：30，底部：20}；
//声明SVG的高度和宽度。
变量高度=500-margin.bottom-margin.top；
变量宽度=970-margin.left-margin.right；
//定义x和y的缩放比例
var x=d3.scale.linear（）.domain（[d3.min（数据，函数（d）{return d.Year}），d3.max（数据，函数（d）{return d.Year}）]）.range（[0，width]）；
变量y=d3.scale.linear（）.domain（[0，d3.max（数据，函数（d））{
如果（d.销售

是否设置了

视口

元标记

<meta name="viewport" content="width=device-width, initial-scale=1">

---

如果您支持iOS设备，请选中此项

是，我添加了此项。修复方法是给保存元素的div一个“css样式属性”$（“#divid”）.css（“overflow-x”，“scroll”）；