D3棒グラフミラー

debugcn 投稿 Dev

kaybuzz

D3グラフバーを下の図のように回転/平行移動するにはどうすればよいですか。ただし、数字は完全に正しく配置されています。範囲配列パラメーターを切り替えてみましたが、バーの配置が反転するだけです。

<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([0, width]);

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("width", x)
.attr("height", barHeight - 1);

bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.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>

ジェラルド・フルタド

D3スケール

あなたの質問に対する答えは、D3スケールとは何か、そしてそれらの使用方法を正しく理解することです。「範囲配列パラメータを切り替えてみました」と言ったとき、あなたは正しい道を進んでいました。

この回答で説明しているように、D3スケールは基本的に、ドメイン（入力）を画像または範囲（出力）にマッピングする数学的な方法です。Jerome Cukierブログからのこの画像は、さらに教訓的です。

あなたが見ることができるように、スケールがマップする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の左端のゼロにマップされます。その後、rectの属性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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]