javascript - 使用 d3 的相同 X 轴多折线图

Question

我使用 blockbuilder.org 和 Mike Bostock 可重用图表技术的一些片段创建了 d3 图表。

但是，我想为多个图表设置一个 y 轴。在这里，每当我调用 select 函数时，我都会为每个折线图创建 Y 轴。

还有更多我必须在这里提到的事情，我必须只为最后选中的复选框图表显示 Y 轴，这将是底部图表。

这里是 Jsfiddle我工作过

以下是加载片段

 $(window).load(function () {

            var textareas$ = $('#chartarea div');
            textareas$.hide();
            $('input[name="Air"]').change(function () {

                var elem$ = $(this);
                var correspelem$ = textareas$.eq(elem$.val() - 1);
                if (elem$.val() == 1) {
                    select('Retail', "#Retail");
                } else if (elem$.val() == 2) {
                    select("Gas", "#Gas");
                } else if (elem$.val() == 3) {
                    select("Dining", "#Dining");
                } else {};
                if (elem$.is(':checked')) correspelem$.show();
                else correspelem$.hide();

            });
        });


        var data = [ // <-A
            {
                date: "2014/01",
                Gas: 10,
                Retail: 22,
                Dining: 120
            },
            {
                date: "2014/02",
                Gas: 10,
                Retail: 42,
                Dining: 53
            },
            {
                date: "2014/03",
                Gas: 30,
                Retail: 24,
                Dining: 76
            },
            {
                date: "2014/04",
                Gas: 50,
                Retail: 29,
                Dining: 49
            },
            {
                date: "2014/05",
                Gas: 80,
                Retail: 47,
                Dining: 47
            },
            {
                date: "2014/06",
                Gas: 65,
                Retail: 78,
                Dining: 64
            },
            {
                date: "2014/07",
                Gas: 55,
                Retail: 38,
                Dining: 29
            },
            {
                date: "2014/08",
                Gas: 43,
                Retail: 34,
                Dining: 47
            },
            {
                date: "2014/09",
                Gas: 20,
                Retail: 54,
                Dining: 34
            },
            {
                date: "2014/10",
                Gas: 10,
                Retail: 34,
                Dining: 27
            },
            {
                date: "2014/11",
                Gas: 43,
                Retail: 8,
                Dining: 45
            },
            {
                date: "2014/12",
                Gas: 40,
                Retail: 26,
                Dining: 28
            },
            {
                date: "2015/01",
                Gas: 10,
                Retail: 34,
                Dining: 54
            },
            {
                date: "2015/02",
                Gas: 15,
                Retail: 29,
                Dining: 28
            },
            {
                date: "2015/03",
                Gas: 30,
                Retail: 19,
                Dining: 43
            },
            {
                date: "2015/04",
                Gas: 50,
                Retail: 23,
                Dining: 43
            },
            {
                date: "2015/05",
                Gas: 80,
                Retail: 49,
                Dining: 43
            },
            {
                date: "2015/06",
                Gas: 65,
                Retail: 32,
                Dining: 43
            },
            {
                date: "2015/07",
                Gas: 55,
                Retail: 25,
                Dining: 39
            },
            {
                date: "2015/08",
                Gas: 30,
                Retail: 35,
                Dining: 47
            },
            {
                date: "2015/09",
                Gas: 20,
                Retail: 54,
                Dining: 37
            },
            {
                date: "2015/10",
                Gas: 10,
                Retail: 34,
                Dining: 54
            },
            {
                date: "2015/11",
                Gas: 8,
                Retail: 29,
                Dining: 44
            },
            {
                date: "2015/12",
                Gas: 40,
                Retail: 14,
                Dining: 45
            },
            {
                date: "2016/01",
                Gas: 10,
                Retail: 15,
                Dining: 34
            },
            {
                date: "2016/02",
                Gas: 15,
                Retail: 34,
                Dining: 23
            },
            {
                date: "2016/03",
                Gas: 30,
                Retail: 28,
                Dining: 45
            },
            {
                date: "2016/04",
                Gas: 50,
                Retail: 34,
                Dining: 65
            },
            {
                date: "2016/05",
                Gas: 80,
                Retail: 45,
                Dining: 67
            },
            {
                date: "2016/06",
                Gas: 65,
                Retail: 35,
                Dining: 65
            },
            {
                date: "2016/07",
                Gas: 55,
                Retail: 43,
                Dining: 36
            },
            {
                date: "2016/08",
                Gas: 30,
                Retail: 34,
                Dining: 53
            },
            {
                date: "2016/09",
                Gas: 20,
                Retail: 54,
                Dining: 76
            },
            {
                date: "2016/10",
                Gas: 10,
                Retail: 45,
                Dining: 65
            },
            {
                date: "2016/11",
                Gas: 8,
                Retail: 43,
                Dining: 56
            },
            {
                date: "2016/12",
                Gas: 40,
                Retail: 23,
                Dining: 64
            }
        ];
        
                var formatDate = d3.time.format("%b %Y");

                function timeSeriesChart() {
                                var margin = {top: 20, right: 40, bottom: 30, left: 40},
                                    width = 1150,
                                    height = 120,
                                
                                xValue = function(d) { return d[0]; },
                                yValue = function(d) { return d[1]; },
                                
                                xScale = d3.time.scale(),
                                
                                yScale = d3.scale.linear(),
                                
                                xAxis = d3.svg.axis()
                                                        .scale(xScale)
                                                        .orient("bottom")
                                                        .tickFormat(formatDate)
                                                        .tickSize(6, 0)
                                                        .tickPadding(1),
                                area = d3.svg.area()
                                                        .x(X)
                                                        .y1(Y),
                                line = d3.svg.line()
                                                    .x(X)
                                                    .y(Y);

                                function chart(selection) {
                                                selection.each(function(data) {
                                                                    // Convert data to standard representation greedily;
                                                                    // this is needed for nondeterministic accessors.
                                                                    data = data.map(function(d, i) {
                                                                                                                return [xValue.call(data, d, i), yValue.call(data, d, i)];
                                                                                                                });

                                                                    // Update the x-scale.
                                                                    xScale
                                                                                .domain(d3.extent(data, function(d) { return d[0]; }))
                                                                                .range([0, width - margin.left - margin.right]);

                                                                    // Update the y-scale.
                                                                     yScale
                                                                                .domain([0, d3.max(data, function(d) { return d[1]; })])
                                                                                .range([height - margin.top - margin.bottom, 0]);

                                                                    // Select the svg element, if it exists.
                                                                    var svg = d3.select(this).selectAll("svg")
                                                                                                        .data([data]);

                                                                    // Otherwise, create the skeletal chart.
                                                                    var gEnter = svg.enter().append("svg")
                                                                                                            .append("g");

                                                                            gEnter.append("path")
                                                                                        .attr("class", "area");
      
                                                                            gEnter.append("path")
                                                                                        .attr("class", "line");
      
                                                                            gEnter.append("g")
                                                                                        .attr("class", "x axis");

                                                                            // Update the outer dimensions.
                                                                            svg .attr("width", width)
                                                                                        .attr("height", height);

                                                                // Update the inner dimensions.
                                                            var g = svg.select("g")
                                                                                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                                                        // Update the area path.
                                                        //  g.select(".area")
                                                        //    .attr("d", area.y0(yScale.range()[0]));

                                                    // Update the line path.
                                                    g.select(".line")
                                                        .attr("d", line);

                                                 // Update the x-axis.
                                                    g.select(".x.axis")
                                                            .attr("transform", "translate(0," + yScale.range()[0] + ")")
                                                            .call(xAxis);
                                            });
                                    }

                                    // The x-accessor for the path generator; xScale ∘ xValue.
                                                function X(d) {
                                                                             return xScale(d[0]);
                                                                        }

                                // The x-accessor for the path generator; yScale ∘ yValue.
                                                function Y(d) {
                                                                                return yScale(d[1]);
                                                                        }

                                                chart.margin = function(_) {
                                                                    if (!arguments.length) return margin;
                                                                                                            margin = _;
                                                                                                            return chart;
                                                                };

                                                chart.width = function(_) {
                                                                    if (!arguments.length) return width;
                                                                                                        width = _;
                                                                                                        return chart;
                                                                             };

                                                chart.height = function(_) {
                                                                    if (!arguments.length) return height;
                                                                                                                height = _;
                                                                                                         return chart;
                                                                    };

                                            chart.x = function(_) {
                                                                    if (!arguments.length) return xValue;
                                                                                                                xValue = _;
                                                                                                        return chart;
                                                                        };

                                            chart.y = function(_) {
                                                                        if (!arguments.length) return yValue;
                                                                                                                        yValue = _;
                                                                                                            return chart;
                                                                            };

                                                            return chart;
                                                        }


                                            var chart = timeSeriesChart()
                                                                         .x(function(d) { return new Date(d.date); })
                                                                        .y(function(d) { return +d['category']; });

                                            function select(category, id) {
                                                                                            var dataset = [];
                                                                                                dataset = data.map(function(d) {
                                                                                                                                                    return {
                                                                                                                                                                            date:d.date,
                                                                                                                                                                        category:d[category]
                                                                                                                                                                    };
                                                                                                                                                                }) 
        
                                                                                                        d3.select(id)
                                                                                                            .datum(dataset)
                                                                                                            .call(chart);

                                                                                            }

  ul {
            list-style: none;
        }

        ul li {
            margin: 10px;
            font-size: 15px;
            display: inline-block;
        }

        #chartarea {
            display: table;
            height: 470px;
            width: 1150px;
            box-shadow: 10px 10px 5px #c0c0c0
        }

        #Retail {
            margin: 5px;
            padding: 5px 5px 5px 5px;
            width: 1150px;
            box-shadow: 5px 5px 5px #808080;
        }

        #Gas {
            margin: 5px;
            padding: 5px 5px 5px 5px;
            width: 720px;
            box-shadow: 5px 5px 5px #808080;
        }

        #Dining {
            margin: 5px;
            padding: 5px 5px 5px 5px;
            width: 720px;
            box-shadow: 5px 5px 5px #808080;
        }
.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

.area {
  fill: #969696;
}

.attention {
  background: yellow;
  margin: -4px;
  padding: 4px;
}

        .Retail,
        .Gas,
        .Dining {
            min-height: 22px;
            min-width: 10px;
            width: 0px;
            height: 0px;
            background-color: steelblue;
            margin-bottom: 3px;
            font-size: 11px;
            color: #f0f8ff;
            text-align: right;
            padding-right: 2px;
        }

        #Gas,
        #Dining,
        #Retail {
            display: table-row;
            height: auto;
            width: auto;
            overflow: hidden;
        }

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <div id="options">
        <h2>Options</h2>
        <ul>
            <li><input type="checkbox" name="Air" id="Ground1" value="1">Retail</li>
            <li><input type="checkbox" name="Air" id="Ground2" value="2">Gas</li>
            <li><input type="checkbox" name="Air" id="Ground2" value="3">Dining</li>
        </ul>
    </div>

    <h2>Chart Area</h2>
    <div id="chartarea">
        <div id="Retail">Retail</div>
        <div id="Gas">Gas</div>
        <div id="Dining">Dining</div>
    </div>

请指教，如果需要任何进一步的信息。

Answer 1

将此代码添加到您的“更改”处理程序中:

var chartAxis = document.querySelectorAll('#chartarea  .axis.x');

chartAxis.forEach((elem, index) => index !== chartAxis.length - 1 ? elem.style.display = 'none' : elem.style.display = 'block');

fiddle