javascript - D3 条形图镜像

Question

<分区>

Answer 1

D3 秤

您的问题的答案只是正确理解什么是 D3 音阶以及如何使用它们。当您说 “我已经尝试切换范围数组参数” 时，您走在了正确的道路上。

D3 尺度基本上是一种将域(输入)映射到图像或范围(输出)的数学方法，正如我解释的那样 in this answer .此图片来自 Jerome Cukier blog甚至更具说教性:

如您所见，比例尺将域中的 20 映射到范围中的 0，将域中的 80 映射到 120 在范围内。

反向范围

考虑到这一点，您的问题的答案就很简单了。如果您现在查看您的体重秤...

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);

您会看到数据中的零(即定义域)映射到 SVG 空间中的零，数据中的最大值映射到 SVG 中的 width。所以，你只需要反转范围:

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([width, 0]);

现在，数据中的零映射到 SVG 中的最右侧，数据中的最大值映射到零，即 SVG 中的最左侧。之后，您必须调整矩形的 x 和 width 属性。

下面是修改后的代码:

<svg class="chart"></svg>
<script src="//d3js.org/d3.v3.min.js"></script>

<script>
  var data = [4, 8, 15, 16, 23, 42];

  var width = 420,
    barHeight = 20;

  var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([width, 0]);

  var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);

  var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
    });

  bar.append("rect")
    .attr("x", x)
    .attr("width", function(d) {
      return width - x(d)
    })
    .attr("height", barHeight - 1);

  bar.append("text")
    .attr("x", width - 2)
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) {
      return d;
    });

</script>

<style>
  .chart rect {
    fill: green;
  }

  .chart text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: end;
  }

</style>