D3.js：パンでx方向に拡大

Question

私はD3に新しく、現在私のプロットにズーム機能を作成しようとしています。私はズームのオプションを動作させることができましたが、正確にはどのようにしたいのですか。私は、水平（x軸）のズーム動作とy軸のズーム動作を必要としません。私はまた、横（x軸）方向にパニングをコード化したい。私はまた、パンを無効にすることなくx軸にヒンジをかけようとしていました。私はいくつかの方法を試みましたが、そうすることができませんでした。

すべてのヘルプ/ヒントは素晴らしいだろう

JSFIDDLEのLINK：https://jsfiddle.net/4sts8nfs/3/

コード：

var data = [{ 
    "mytime": "2015-12-01T23:10:00.000Z", 
    "value": 64 
}, { 
    "mytime": "2015-12-01T23:15:00.000Z", 
    "value": 67 
}, { 
    "mytime": "2015-12-01T23:20:00.000Z", 
    "value": 70 
}, { 
    "mytime": "2015-12-01T23:25:00.000Z", 
    "value": 64 
}, { 
    "mytime": "2015-12-01T23:30:00.000Z", 
    "value": 72 
}, { 
    "mytime": "2015-12-01T23:35:00.000Z", 
    "value": 75 
}, { 
    "mytime": "2015-12-01T23:40:00.000Z", 
    "value": 71 
}, { 
    "mytime": "2015-12-01T23:45:00.000Z", 
    "value": 80 
}, { 
    "mytime": "2015-12-01T23:50:00.000Z", 
    "value": 83 
}, { 
    "mytime": "2015-12-01T23:55:00.000Z", 
    "value": 86 
}, { 
    "mytime": "2015-12-02T00:00:00.000Z", 
    "value": 80 
}, { 
    "mytime": "2015-12-02T00:05:00.000Z", 
    "value": 85 
}]; 
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; 

data.forEach(function(d) { 
    d.mytime = parseDate(d.mytime); 
}); 
//var margin = { top: 30, right: 30, bottom: 40, left:50 }, 
var margin = { 
    top: 30, 
    right: 30, 
    bottom: 40, 
    left: 50 
    }, 
    height = 200, 
    width = 900; 
var color = "green"; 
var xaxis_param = "mytime"; 
var yaxis_param = "value"; 
var params1 = { 
    margin: margin, 
    height: height, 
    width: width, 
    color: color, 
    xaxis_param: xaxis_param, 
    yaxis_param: yaxis_param 
}; 

draw_graph(data, params1); 

function draw_graph(data, params) { 

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

    var make_y_axis = function() { 
    return d3.svg.axis() 
     .scale(y_scale) 
     .orient("left") 
     .ticks(5); 
    }; 

    //Get the margin 
    var xaxis_param = params.xaxis_param; 
    var yaxis_param = params.yaxis_param; 
    var color_code = params.color; 
    var margin = params.margin; 
    var height = params.height - margin.top - margin.bottom, 
    width = params.width - margin.left - margin.right; 

    var x_extent = d3.extent(data, function(d) { 
    return d[xaxis_param] 
    }); 

    var y_extent = d3.extent(data, function(d) { 
    return d[yaxis_param] 
    }); 

    var x_scale = d3.time.scale() 
    .domain(x_extent) 
    .range([0, width]); 

    var y_scale = d3.scale.linear() 
    .domain([0, y_extent[1]]) 
    .range([height, 0]); 

    var zoom = d3.behavior.zoom() 
    .x(x_scale) 
    .y(y_scale) 
    .on("zoom", zoomed); 


    //Line 
    var line = d3.svg.line() 
    .defined(function(d) { 
     return d[yaxis_param]; 
    }) 
    .x(function(d) { 
     return x_scale(d[xaxis_param]); 
    }) 
    .y(function(d) { 
     return y_scale(d[yaxis_param]); 
    }); 

    var lineRef = d3.svg.line() 
    .x(function(d) { 
     return x_scale(d[xaxis_param]); 
    }) 
    .y(function(d) { 
     return y_scale(20); 
    }); 

    var myChart = d3.select('body').append('svg') 
    .attr('id', 'graph') 
    .style('background', '#E7E0CB') 
    .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) 
    .on("mousedown.zoom", null); 

    myChart.append("svg:rect") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("class", "plot"); 


    var legend = myChart.append("g") 
    .attr("class", "legend") 
    .attr("transform", "translate(" + 5 + "," + (height - 25) + ")") 

    legend.append("rect") 
    .style("fill", color_code) 
    .attr("width", 20) 
    .attr("height", 20); 

    legend.append("text") 
    .text(yaxis_param) 
    .attr("x", 25) 
    .attr("y", 12); 


    var vAxis = d3.svg.axis() 
    .scale(y_scale) 
    .orient('left') 
    .ticks(5) 


    var hAxis = d3.svg.axis() 
    .scale(x_scale) 
    .orient('bottom') 
    .ticks(5); 

    var majorAxis = d3.svg.axis() 
    .scale(x_scale) 
    .orient('bottom') 
    .ticks(d3.time.day, 1) 
    .tickSize(-height) 
    .outerTickSize(0); 

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

    myChart.append("g") 
    .attr("class", "x axis major") 
    .attr("transform", "translate(0," + height + ")") 
    .call(majorAxis); 

    myChart.append("g") 
    .attr("class", "y axis") 
    .call(vAxis); 

    var circlePoint = myChart.selectAll('circle') 
         .data(data) 
         .enter() 
         .append("circle"); 

    var circleAttributes = circlePoint 
          .attr("cx", function (d) { return x_scale(d[xaxis_param]); }) 
          .attr("cy", function (d) { return y_scale(d[yaxis_param]); }) 
          .attr("r", 3) 
          .style("fill", "none") 
          .style("stroke", "red"); 

    var clip = myChart.append("svg:clipPath") 
    .attr("id", "clip") 
    .append("svg:rect") 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("width", width) 
    .attr("height", height); 

    var chartBody = myChart.append("g") 
    .attr("clip-path", "url(#clip)"); 



chartBody.append("svg:path") 
    .datum(data) 
    .attr('class', 'line') 
    .attr("d", line) 
    .attr('stroke', color_code) 
    .attr('stroke-width', 1) 
    .attr('fill', 'none'); 

    chartBody 
    .append('svg:path') 
    .datum(data) 
    .attr('class', 'line1') 
    .attr("d", lineRef) 
    .attr('stroke', 'blue') 
    .attr('stroke-width', 1) 
    .style("stroke-dasharray", ("3, 3")) 
    .attr('fill', 'none'); 

    function zoomed() { 
    myChart.select(".x.axis").call(hAxis); 
    myChart.select(".y.axis").call(vAxis); 
    myChart.select(".x.axis.major").call(majorAxis); 
    myChart.select(".line") 
     .attr("class", "line") 
     .attr("d", line); 
    myChart.select(".line1") 
     .attr("class", "line1") 
     .attr("d", lineRef); 

     circlePoint 
     .attr("cx", function (d) { return x_scale(d[xaxis_param]); }) 
     .attr("cy", function (d) { return y_scale(d[yaxis_param]); }); 
    } 
} 

Answer 1

あなただけではY_SCALEを更新しないように、あなたのズーム動作の定義を変更する必要がありますズームしながら。

var zoom = d3.behavior.zoom() 
    .x(x_scale) 
    //.y(y_scale) 
    .on("zoom", zoomed);