翻转 d3js svg 线答案

【问题标题】：Flip d3js svg line翻转 d3js svg 线
【发布时间】：2017-10-19 03:09:19
【问题描述】：

我想翻转这条线，使较高的值上升，而较低的值下降。我尝试使用scale(1,-1)，但它没有输出任何东西。请在下面查看我的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="paths"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script>
    var canvas = d3.select(".paths").append("svg")
      .attr("width", 500)
      .attr("height", 500);

    var data = [
      {x:10, y:200},
      {x:30, y:170},
      {x:50, y:70},
      {x:70, y:140},
      {x:90, y:150},
      {x:110, y:120},
      {x:130, y:150},
      {x:150, y:140},
      {x:170, y:110}
    ];

    var group = canvas.append('g')
        .attr("transform", "scale(1,1)");

    var line = d3.svg.line()
      .x(function(d){ return d.x })
      .y(function(d){ return d.y });


    group.selectAll("path")
      .data([data])
      .enter()
      .append("path")
      .attr("d", line)
      .attr("fill", "none")
      .attr("stroke", "red")
      .attr("stroke-width", 2);


  </script>
  </body>
</html>

https://jsbin.com/dayoxon/7/edit?html,output

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

您必须使用比例尺，顺便说一下，这将解决您遇到的另一个问题：您的数据值不应该是（或通常不会是）SVG 坐标。

这是一个线性刻度的基本示例：

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

在这里，域从 0 到 200，这是您数据中的最大值。然后，这些值将被映射到：

.range([height, 0])

height 是 SVG 的高度。

最后，使用线生成器中的刻度：

var line = d3.svg.line()
  .x(function(d){ return d.x })
  .y(function(d){ return scale(d.y) });

这是你的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="paths"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script>
    var canvas = d3.select(".paths").append("svg")
      .attr("width", 500)
      .attr("height", 300);

    var data = [
      {x:10, y:200},
      {x:30, y:170},
      {x:50, y:70},
      {x:70, y:140},
      {x:90, y:150},
      {x:110, y:120},
      {x:130, y:150},
      {x:150, y:140},
      {x:170, y:110}
    ];

    var group = canvas.append('g');
      
    var scale = d3.scale.linear()
      .domain([0, 200])
      .range([300,0]);

    var line = d3.svg.line()
      .x(function(d){ return d.x })
      .y(function(d){ return scale(d.y) });
    
    
    group.selectAll("path")
      .data([data])
      .enter()
      .append("path")
      .attr("d", line)
      .attr("fill", "none")
      .attr("stroke", "red")
      .attr("stroke-width", 2);


  </script>
  </body>
</html>

【讨论】：

谢谢。所以基本上你颠倒了它的底部和顶部？使用 .range([height,0])
是的。这是一本关于音阶的好读物：alignedleft.com/tutorials/d3/scales