使用d3.scalePoint缩放（）

因此，我修改了这个例子，以便我可以在xAxis上使用scalePoint（而不是scaleLinear，我也更改了代码，以便您只能放大xAxis，我不在乎Y轴缩放）：使用d3.scalePoint缩放（）

https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f

一切似乎除变焦是工作，我得到了undefined is not a function错误在这条线：gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));

有关如何使用scalePoint使变焦的工作任何想法？

下面的代码：

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
</head> 

<body> 
    <style> 
     text { 
      fill: black; 
     } 

     rect { 
      fill: steelblue; 
     } 

     path.chart__line { 
      fill: green; 
      opacity: .3; 
      stroke: green; 
      stroke-width: 1.5px; 
     } 
    </style> 
    <svg id="my-svg" width="960" height="500"> 
     <defs> 
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> 
       <stop offset="0.0%" stop-color="#2c7bb6"></stop> 
       <stop offset="12.5%" stop-color="#00a6ca"></stop> 
       <stop offset="25.0%" stop-color="#00ccbc"></stop> 
       <stop offset="37.5%" stop-color="#90eb9d"></stop> 
       <stop offset="50.0%" stop-color="#ffff8c"></stop> 
       <stop offset="62.5%" stop-color="#f9d057"></stop> 
       <stop offset="75.0%" stop-color="#f29e2e"></stop> 
       <stop offset="87.5%" stop-color="#e76818"></stop> 
       <stop offset="100.0%" stop-color="#d7191c"></stop> 
      </linearGradient> 
     </defs> 
    </svg> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <script> 
     let xDomain = ['A', 'B', 'C']; 

     let zoomed =() => { 
      view.attr("transform", d3.event.transform); 
      gX.call(xAxis.scale(d3.event.transform.rescaleX(x))); 
      // gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); // I don't care about yAxis 
     }; 

     let resetted =() => { 
      svg.transition() 
       .duration(750) 
       .call(zoom.transform, d3.zoomIdentity); 
     }; 

     let svg = d3.select("#my-svg"), 
      width = +svg.attr("width"), 
      height = +svg.attr("height"); 

     let zoom = d3.zoom() 
      .scaleExtent([1, 40]) 
      .translateExtent([[0, 0], [width, height]]) 
      .on("zoom", zoomed); 

     let x = d3.scalePoint() 
      .domain(xDomain) 
      .range([0, width]); 

     let y = d3.scaleLinear() 
      .domain([0, height]) 
      .range([0, height]); 

     let xAxis = d3.axisBottom(x) 
      .ticks(xDomain.length) 
      .tickSize(height) 
      .tickPadding(8 - height); 

     let yAxis = d3.axisRight(y) 
      .ticks(10) 
      .tickSize(width) 
      .tickPadding(8 - width); 

     let view = svg.append("rect") 
      .attr("class", "view") 
      .attr("x", 0) 
      .attr("y", 0) 
      .attr("width", width) 
      .attr("height", height); 

     let gX = svg.append("g") 
      .attr("class", "axis axis--x") 
      .call(xAxis); 

     let gY = svg.append("g") 
      .attr("class", "axis axis--y") 
      .call(yAxis); 

     d3.select("button") 
      .on("click", resetted); 

     svg.call(zoom); 
    </script> 
</body> 

</html>

谢谢您的时间。

来源

2017-04-25 ilovelamp

如果您想使用transformX功能，则需要使用continuous scale。它使用秤的invert功能，只有连续秤提供。

虽然你提到你不想使用scaleLinear我测试了它，它似乎工作正常。（我不得不启用Ÿ缩放来测试这个）

<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 
    <style> 
 
    text { 
 
     fill: black; 
 
    } 
 
    
 
    rect { 
 
     fill: steelblue; 
 
    } 
 
    
 
    path.chart__line { 
 
     fill: green; 
 
     opacity: .3; 
 
     stroke: green; 
 
     stroke-width: 1.5px; 
 
    } 
 
    </style> 
 
    <svg id="my-svg" width="960" height="500"> 
 
     <defs> 
 
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> 
 
       <stop offset="0.0%" stop-color="#2c7bb6"></stop> 
 
       <stop offset="12.5%" stop-color="#00a6ca"></stop> 
 
       <stop offset="25.0%" stop-color="#00ccbc"></stop> 
 
       <stop offset="37.5%" stop-color="#90eb9d"></stop> 
 
       <stop offset="50.0%" stop-color="#ffff8c"></stop> 
 
       <stop offset="62.5%" stop-color="#f9d057"></stop> 
 
       <stop offset="75.0%" stop-color="#f29e2e"></stop> 
 
       <stop offset="87.5%" stop-color="#e76818"></stop> 
 
       <stop offset="100.0%" stop-color="#d7191c"></stop> 
 
      </linearGradient> 
 
     </defs> 
 
    </svg> 
 
    <script src="https://d3js.org/d3.v4.js"></script> 
 
    <script> 
 
    let xDomain = ['A', 'B', 'C']; 
 

 
    let zoomed =() => { 
 
     view.attr("transform", d3.event.transform); 
 
     gX.call(xAxis.scale(d3.event.transform.rescaleX(x))); 
 
     gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); // I don't care about yAxis 
 
    }; 
 

 
    let resetted =() => { 
 
     svg.transition() 
 
     .duration(750) 
 
     .call(zoom.transform, d3.zoomIdentity); 
 
    }; 
 

 
    let svg = d3.select("#my-svg"), 
 
     width = +svg.attr("width"), 
 
     height = +svg.attr("height"); 
 

 
    let zoom = d3.zoom() 
 
     .scaleExtent([1, 40]) 
 
     .translateExtent([ 
 
     [0, 0], 
 
     [width, height] 
 
     ]) 
 
     .on("zoom", zoomed); 
 

 
    let x = d3.scaleLinear() 
 
     .domain(xDomain) 
 
     .range([0, width]); 
 

 
    let y = d3.scaleLinear() 
 
     .domain([0, height]) 
 
     .range([0, height]); 
 

 
    let xAxis = d3.axisBottom(x) 
 
     .ticks(xDomain.length) 
 
     .tickSize(height) 
 
     .tickPadding(8 - height); 
 

 
    let yAxis = d3.axisRight(y) 
 
     .ticks(10) 
 
     .tickSize(width) 
 
     .tickPadding(8 - width); 
 

 
    let view = svg.append("rect") 
 
     .attr("class", "view") 
 
     .attr("x", 0) 
 
     .attr("y", 0) 
 
     .attr("width", width) 
 
     .attr("height", height); 
 

 
    let gX = svg.append("g") 
 
     .attr("class", "axis axis--x") 
 
     .call(xAxis); 
 

 
    let gY = svg.append("g") 
 
     .attr("class", "axis axis--y") 
 
     .call(yAxis); 
 

 
    d3.select("button") 
 
     .on("click", resetted); 
 

 
    svg.call(zoom); 
 
    </script> 
 
</body> 
 

 
</html>

来源

2017-04-27 19:12:34 thedude

THX的答案，我被要求做其他工作着的东西，但我最终会试试这个并更新线程。对不起，来晚了。很高兴知道transformX仅适用于连续缩放。 – ilovelamp

使用d3.scalePoint缩放（）

回答

相关问题