D3.JS：2Dプロットのプロットライン静的wrt軸の作成

Question

私はD3の初心者であり、それについてはあまりよく分かりません。 現在、D3を使用してグラフ上に2D線をプロットしようとしています。私は、線をプロットしたり、軸を追加したり、プロットにズーム機能を追加することに成功しました。

y軸にヒンジをつけてクリックするだけで左または右に移動できないようになっています（現時点ではjsfiddleを実行すると、それをクリックしてプロットされた行を移動できます） 。私はまだズームインまたはズームアウトしたいと思うでしょう。しかし、y軸にヒンジをかけたままにする必要があります。これが私の問題を明確にしているかどうか教えてください。 ありがとう！ JSフィドルに

リンク： https://jsfiddle.net/adityap16/4sts8nfs/2/

コード

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

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


    } 
} 

Answer 1

パンを無効にするには、この.on("mousedown.zoom", null)を追加します。

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);//disable panning 

作業コードhere