D3jsでズーム/パンを使用して複数のy軸を追加する

json入力に基づいて複数の線を表示するd3jsの水平折れ線グラフに取り組んでいます。ズームとパンがありますが、描画された各線のy軸も表示する必要があります。私の場合、3つです。

まず、これは悪い習慣ですか？3つすべてを片側に積み重ねる必要がありますか、それとも左側に2つ、右側に1つ、またはその他の組み合わせを維持する必要がありますか？

私はこのチュートリアルに従ってみましたが、それは実際にはもっと混乱して混乱するコードを作成するだけでした。

誰かがy軸を追加する方法と、現在のようにズームやパンでそれらを機能させる方法を教えてくれることを望んでいました。

これが私の現在の見解です：

そして、これが私のコードです：

 <script>

        var margin = { top: 20, right: 80, bottom: 20, left: 40 },
            width = ($("#trendcontainer").width() - 50) - margin.left - margin.right,
            height = 650 - margin.top - margin.bottom;

        var svg;

        var format = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
        var x = d3.time.scale()
            .range([0, width]);

        var y0 = d3.scale.linear()
            .range([height, 0]);

        var y1 = d3.scale.linear()
            .range([height, 0]);

        var color = d3.scale.category10();
        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickSize(-height);
        // TODO: Rename axis to instrument name (i.e 'depth')
        var yAxis0 = d3.svg.axis()
            .scale(y0)
            .orient("left")
            .tickSize(-width);

        var yAxis1 = d3.svg.axis()
            .scale(y1)
            .orient("right")
            .tickSize(-width);

        var line = d3.svg.line()
            .interpolate("basis")
            .x(function(d) {
                return x(d.date);
            })
            .y(function(d) {
                return y0(d.value);
            });

        d3.json('@Url.Action("DataBlob", "Trend", new {id = Model.Unit.UnitId, runId = Request.Params["runId"]})', function(error, tmparray) {
            var json = JSON.parse(tmparray);

            $('#processing').hide();

            color.domain(d3.keys(json[0]).filter(function(key) {
                return key !== "Time" && key !== "Id";
            }));

            json.forEach(function(d) {
                var date = format(d.Time);
                d.Time = date;
            });

            var instruments = color.domain().map(function(name) {
                return {
                    name: name,
                    values: json.map(function(d) {
                        return {
                            date: d.Time,
                            value: +d[name]
                        };
                    })
                };
            });

            x.domain(d3.extent(json, function(d) {
                return d.Time;
            }));
            y0.domain([
                d3.min(instruments, function (c) {
                    if (c.name == "Depth") {
                        return d3.min(c.values, function (v) {
                            return v.value;
                        });
                    }
                    //return d3.min(c.values, function (v) {
                    //    return v.value;
                    //});
                }),
                d3.max(instruments, function(c) {
                    return d3.max(c.values, function(v) {
                        return v.value;
                    });
                })
            ]);

            y1.domain([
                d3.min(instruments, function (c) {
                    console.log("In y1.domain c is: " + c);
                    if (c.name == "Weight") {
                        return d3.min(c.values, function (v) {
                            return v.value;
                        });
                    }
                    //return d3.min(c.values, function (v) {
                    //    return v.value;
                    //});
                }),
                d3.max(instruments, function(c) {
                    return d3.max(c.values, function(v) {
                        return v.value;
                    });
                })
            ]);

            var zoom = d3.behavior.zoom()
                .x(x)
                .y(y0)
                .scaleExtent([1, 10])
                .on("zoom", zoomed);

            svg = d3.select(".panel-body").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .call(zoom)
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom);

            svg.append("rect")
                .attr("width", width)
                .attr("height", height);

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

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

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

            var instrument = svg.selectAll(".instrument")
                .data(instruments)
                .enter().append("g")
                .attr("class", "instrument");

            instrument.append("path")
                .attr("class", "line")
                .attr("d", function(d) {
                    return line(d.values);
                })
                .style("stroke", function(d) {
                    return color(d.name);
                });

            instrument.append("text")
                .datum(function(d) {
                    return {
                        name: d.name,
                        value: d.values[d.values.length - 1]
                    };
                })
                .attr("transform", function(d) {
                    return "translate(" + x(d.value.date) + "," + y0(d.value.value) + ")";
                })
                .attr("x", 3)
                .attr("dy", ".35em")
                .text(function(d) {
                    return d.name;
                });
        });

        function zoomed() {
            svg.select(".x.axis").call(xAxis);
            svg.select(".y.axis").call(yAxis0);
            svg.select(".x.grid")
                .call(make_x_axis()
                    .tickSize(-height, 0, 0)
                    .tickFormat(""));
            svg.select(".y.grid")
                .call(make_y_axis()
                    .tickSize(-width, 0, 0)
                    .tickFormat(""));
            svg.selectAll(".line")
                .attr("d", function(d) { return line(d.values); });
        };

        var make_x_axis = function() {
            return d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .ticks(5);
        };

        var make_y_axis = function() {
            return d3.svg.axis()
                .scale(y0)
                .orient("left")
                .ticks(5);
        };
</script>

最後に、これが私が達成しようとしていることです（このコンポーネントは非常に遅く、大きなデータセットをうまく処理しません）：