Javascript 如何使x轴在d3折线图中可滚动

下面是我使用的代码。这段代码对我来说运行良好，但问题是当下面的代码输出时，图形的某些部分在x轴上没有显示。由于x轴长度不足以显示，某些零件被隐藏。所以我决定让这个图表可以滚动，并且我尝试了一个代码让它可以滚动，但是没有成功

请帮我整理一下

我使用了以下参考：

图表：

HTML代码：

     <div class="row">
         <div class="col-sm-12">
             <div class="lineChart1" style=" overflow: scroll">
                 <svg width="960" height="500" style=" overflow: scroll"></svg>
             </div>
         </div>
     </div>

//滚动代码开始

              var xscale = d3.scale.linear().domain([0, 12]).range([0, 12]),
                            yscale = d3.scale.linear().domain([0, 100]).range([innerheight, 0]);

                    var line = d3.svg.line()
                            .x(function(d) { return xscale(d[0]); })
                            .y(function(d) { return yscale(d[1]); })
                            .interpolate('basis');

                    svg.append('g')
                            .datum(datasets)
                            .append('path')
                            .attr('class', 'data')
                            .attr('d', line);


                    var zoom = d3.behavior.zoom()
                            .scaleExtent([1, 1])
                            .x(xscale)
                            .on('zoom', function() {
                                svg.select('.data').attr('d', line)
                            });

                    svg.call(zoom);

//滚动代码结束

                });
            }

---

我在这里发现了问题。问题在于您提供的json数据。所有json数据都存储为字符串而不是整数。双引号中包含的所有整数。这意味着它变成了一根弦。当从json数据中获取x轴的最大值时，它将9作为最大值。这是因为当数字是字符串时，9是最大数。因为这张图不会在9点后继续。但预期值是12。这里不需要滚动代码。只需在div中添加css条目（“overflow:scroll”）即可使图形可滚动

                });
            }