タイムラインの要素をD3.js v4を使用してズームする方法

Question

私は、特定のイベントを示すデータポイントを持つタイムライングラフを持っています。グラフにズーム機能を組み込もうとしましたが、デッドエンドに達しました。私は軸を拡大することはできますが、新しいスケールにデータパイプを再配置することはできません。私は多くのd3 bl.ocksを経験してきましたが、解決策は見つかりませんでした。

私はここにjsfiddleで最小限のバージョンがあります： https://jsfiddle.net/q73ggw3e/2/

主な部品は以下のとおりです。

ズーム：

var zoom = d3.zoom() 
    .scaleExtent([1, Infinity]) 
    .translateExtent([[0, 0], [width, height]]) 
    .extent([[0, 0], [width, height]]) 
    .on("zoom", zoomed); 

データポイント：

svg.append("g") 
    .selectAll("logo") 
    .attr("class", "logo") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("cy", 40) 
    .attr("cx", function(d) { return x(d);}) 
    .attr("r", 10) 
    .style("fill", "#000000") 

ズーム領域：

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

そしてズーム機能：私はあまりにもズームイベントに円の（.logo）クラスを結合ますが、何らかの理由でのみ軸ズームする必要があります

function zoomed() { 
    svg.select(".axis--x") 
     .call(xAxis.scale(d3.event.transform.rescaleX(x))); 
    var new_x = d3.event.transform.rescaleX(x); 
     svg.selectAll(".logo") 
      .attr("cx", function(d) { return new_x(d);}); 
    }; 

...

どこが間違っていますか？または、これを行うための完全に他の方法がいくつかあります...

データポイントは、ドラッグアンドドロップ、マウスオーバー、およびクリックの機能もあります。これらは現時点で問題なく動作しますが、ズーム矩形はポインタイベントをブロックします。しかし、それはあなたが作る

Answer 1

奇妙なチャート...働いているズームの後にソートされる

  var margin = { 
 
       top: 30, 
 
       right: 20, 
 
       bottom: 30, 
 
       left: 120 
 
       }, 
 
       width = 800 - margin.left - margin.right, 
 
       height = 210 - margin.top - margin.bottom; 
 

 

 
      var svg = d3.select(".zoom") 
 
       .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 + ")"); 
 

 
      var y = d3.scaleLinear() 
 
       .rangeRound([height, 0]); 
 

 
      var x = d3.scaleTime() 
 
       .rangeRound([0, width]); 
 

 
      var xAxis = d3.axisTop(x) 
 

 
      var zoom = d3.zoom() 
 
       .scaleExtent([1, Infinity]) 
 
       .translateExtent([[0, 0], [width, height]]) 
 
       .extent([[0, 0], [width, height]]) 
 
       .on("zoom", zoomed); 
 

 
      var parseTime = d3.timeParse("%Y-%m-%d"); 
 

 
      var lanes = ["A", "B", "C"] 
 
      var lanesLength = lanes.length 
 

 
      var a = ["2010-02-12", "2013-08-15", "2015-01-23", "2017-01-22"] 
 
      var data = []; 
 
      a.forEach(function (d){ 
 
       data.push(parseTime(d)); 
 
      }); 
 

 
      var today = new Date(); 
 
      x.domain([d3.min(data, function(d) { return d;}), today]); 
 
      y.domain([0, lanesLength]); 
 

 
      svg.append("g") 
 
       .attr("class", "axis axis--x") 
 
       .style("stroke-width", 2) 
 
       .attr("transform", "translate(0)") 
 
       .call(xAxis); 
 

 

 
      svg.append("g") 
 
       .selectAll(".lanetext") 
 
       .data(lanes) 
 
       .enter() 
 
       .append("text") 
 
       .text(function(d) { return d;}) 
 
       .attr("x", -margin.right) 
 
       .attr("y", function(d, i) { return y(i + .5);}) 
 
       .attr("dy", ".5ex") 
 
       .attr("text-anchor", "end") 
 
       .attr("class", "lanetext") 
 

 
      svg.append("g") 
 
       
 
       .attr("class", "logomu") 
 
       .selectAll("logomu") 
 
       .data(data) 
 
       .enter() 
 
       .append("circle") 
 
       .attr("cy", 40) 
 
       .attr("class", "logo") 
 
       .attr("cx", function(d) { return x(d);}) 
 
      .attr("r", 10) 
 
      .style("fill", "#000000") 
 

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

 
      function zoomed() { 
 
       svg.select(".axis--x") 
 
        .call(xAxis.scale(d3.event.transform.rescaleX(x))); 
 
       var new_x = d3.event.transform.rescaleX(x); 
 
       svg.selectAll(".logo") 
 
        .attr("cx", function(d) { return new_x(d);}); 
 
      };

 .axis line{ 
 
      stroke: #000 
 
     } 
 
     .axis path{ 
 
      stroke: #000 
 
     } 
 
     .axis text{ 
 
      fill: #000 
 
     } 
 
     .lanetext { 
 
      fill: #000 
 
     } 
 
     .zoom { 
 
      cursor: move; 
 
      fill: none; 
 
      pointer-events: all; 
 
      } 
 
     .logo { 
 
      fill: #000; 
 
     }

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script> 
 

 
<body> 
 

 
<div class="zoom"> 
 
</div> 
 
</body>

私は円の（.logo）クラスを結合する必要がありますズームイベント もありますが、何らかの理由で軸だけがズームします...

ssの名前のロゴ？あなたがそれを正しく追加することを確認してください。

どこが間違っていますか？または、全く別のやり方があります これは...

あなたが描いたものを確認しませんでした。うん、ちょうど経験が必要