javascript - 如何使 x 轴在 d3 折线图图形中可滚动

Question

下面是我使用的代码。这段代码对我来说工作正常，但问题是当输出来自下面的代码时，图表的某些部分没有显示在 x 轴上。由于x轴长度不够显示，部分部分被隐藏。所以我决定让这个图表可以滚动，我也尝试了一个代码来让它可以滚动。但是它没有用。

请帮我解决这个问题。

我使用了这个引用:- http://computationallyendowed.com/blog/2013/01/21/bounded-panning-in-d3.html

图表:

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>

JavaScript 代码:

     function createLineChart() {


             var number=1;
             var data = [ { label: "Execution 1 - buddhika@gmail.com",
        x: ["1","2","2","3","3","4","4","5","5","6","6","7","7","8","8","9","9","10","10","11","11","12","12"],
        y: ["3","3","3","3","3","3","2","2","3","3","3","3","3","3","3","3","3","3","2","2","3","3","3","3"] }] ;


        var xy_chart = d3_xy_chart()
                .width(960)
                .height(500)
                .xlabel("TCS")
                .ylabel("STATUS");
        var svg = d3.select(".lineChart" + number).append("svg")
                .datum(data)
                .call(xy_chart);






        function d3_xy_chart() {
            var width = 640,
                    height = 480,
                    xlabel = "X Axis Label",
                    ylabel = "Y Axis Label";


            function chart(selection, svg) {
                selection.each(function (datasets) {
                    //
                    // Create the plot.
                    //
                    var margin = {top: 20, right: 80, bottom: 30, left: 50},
                            innerwidth = width - margin.left - margin.right,
                            innerheight = height - margin.top - margin.bottom;


                    var x_scale = d3.scale.linear()
                            .range([0, innerwidth])
                            .domain([d3.min(datasets, function (d) {
                                return d3.min(d.x);
                            }),
                                d3.max(datasets, function (d) {
                                    return d3.max(d.x);
                                })]);


                    var y_scale = d3.scale.linear()
                            .range([innerheight, 0])
                            .domain([d3.min(datasets, function (d) {
                                return d3.min(d.y);
                            }),
                                d3.max(datasets, function (d) {
                                    return d3.max(d.y);
                                })]);



                    var color_scale = d3.scale.category10()
                            .domain(d3.range(datasets.length));

                    var x_axis = d3.svg.axis()
                            .scale(x_scale)
                            .orient("bottom")
                            .tickFormat(function (d, i) {

                                if (d % 1 == 0) {

                                    return parseInt(d)

                                } else {

                                    return "  "

                                }

                            });

                    var y_axis = d3.svg.axis()
                            .scale(y_scale)
                            .orient("left")
                            .tickFormat(function (d, i) {

                                if (d == "1") {

                                    return "NOT EXECUTED"

                                } else if (d == "2") {

                                    return "FAILED"

                                } else if (d == "3") {

                                    return "PASSED"

                                } else {

                                    return "  "

                                }

                            });


                    var x_grid = d3.svg.axis()
                            .scale(x_scale)
                            .orient("bottom")
                            .tickSize(-innerheight)
                            .tickFormat("");

                    var y_grid = d3.svg.axis()
                            .scale(y_scale)
                            .orient("left")
                            .tickSize(-innerwidth)
                            .tickFormat("");

                    var draw_line = d3.svg.line()
                            .interpolate("linear")
                            .x(function (d) {
                                return x_scale(d[0]);
                            })
                            .y(function (d) {
                                return y_scale(d[1]);
                            });

                    var svg = d3.select(this)
                            .attr("width", width)
                            .attr("height", height)
                            .append("g")
                            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                    svg.append("g")
                            .attr("class", "x grid")
                            .attr("transform", "translate(0," + innerheight + ")")
                            .call(x_grid);

                    svg.append("g")
                            .attr("class", "y grid")
                            .call(y_grid);

                    svg.append("g")
                            .attr("class", "x axis")
                            .attr("transform", "translate(0," + innerheight + ")")
                            .call(x_axis)
                            .append("text")
                            .attr("dy", "-.71em")
                            .attr("x", innerwidth)
                            .style("text-anchor", "end")
                            .text(xlabel);

                    svg.append("g")
                            .attr("class", "y axis")
                            .call(y_axis)
                            .append("text")
                            .attr("transform", "rotate(-90)")
                            .attr("y", 6)
                            .attr("dy", "0.71em")
                            .style("text-anchor", "end")
                            .text(ylabel);

                    var data_lines = svg.selectAll(".d3_xy_chart_line")
                            .data(datasets.map(function (d) {
                                return d3.zip(d.x, d.y);
                            }))
                            .enter().append("g")
                            .attr("class", "d3_xy_chart_line");


                    data_lines.append("path")
                            .attr("class", "line")
                            .attr("d", function (d) {
                                return draw_line(d);
                            })
                            .attr("stroke", function (_, i) {
                                return color_scale(i);
                            });

                    data_lines.append("text")
                            .datum(function (d, i) {
                                return {name: datasets[i].label, final: d[d.length - 1]};
                            })
                            .attr("transform", function (d) {
                                return ( "translate(" + x_scale(d.final[0]) + "," +
                                y_scale(d.final[1]) + ")" );
                            })
                            .attr("x", 3)
                            .attr("dy", ".35em")
                            .attr("fill", function (_, i) {
                                return color_scale(i);
                            })
                            .text(function (d) {
                                return d.name;
                            });

//滚动代码开始

              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);

//滚动代码END

                });
            }

Answer 1

我在这里发现了问题。问题出在您提供的 json 数据中。所有 json 数据都存储为字符串而不是整数。双引号中的所有整数。这意味着它变成了一个字符串。当从 json 数据中取 x 轴的最大数时，它取 9 作为最大数。发生这种情况是因为当数字是字符串时 9 是最大数字。因为该图在 9 点之后不会继续。但预期值为 12。这里不需要滚动代码。只需在 div 中添加 css 条目(“溢出:滚动”)即可使图形可滚动