D3棒グラフ - 右から左へのバーの逆転

Question

D3の新機能です。私は現在の例を取り上げています。私がしようとしているのは、棒グラフを逆にすることで、すべてのラベルはグラフの終わりから始まります。 x座標を0の代わりにwidthに変更し、幅を負の幅に変更しようとしました。

ここは私の現在のバージョンです。

私は基本的に、すべてのバーが0ではなく100個のマークから始まるようにします。ありがとう！

https://plnkr.co/edit/fqW0i3H3ZACJx1oeViR6?p=preview

VARのSVG = d3.select（ "SVG"）、 マージン= {上部：20、右：20、底部30は、左：80}、 幅= + SVGを。 attr（ "width"） - margin.left - margin.right、 height = + svg.attr（ "height"） - margin.top - margin.bottom;

var tooltip = d3.select（ "body"）。append（ "div"）。attr（ "class"、 "toolTip"）;

var x = d3.scaleLinear（）。範囲（[0、幅]）; var y = d3.scaleBand（）。range（[height、0]）;

var g = svg.append（ "g"）.attr（ "transform"、 "translate（" + margin.left + "、" + margin.top + "）"）;

d3.json（ "data.json"、関数（誤差、データ）{（誤差） エラーをスローする場合、

data.sort（関数（B）{戻りa.value - B .VALUE;}）;

x.domain([0, d3.max(data, function(d) { return d.value; })]); 
y.domain(data.map(function(d) { return d.area; })).padding(0.1); 

g.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x).ticks(5).tickFormat(function(d) { return parseInt(d/1000); }).tickSizeInner([-height])); 

g.append("g") 
    .attr("class", "y axis") 
    .call(d3.axisLeft(y)); 

g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", 0) 
    .attr("height", y.bandwidth()) 
    .attr("y", function(d) { return y(d.area); }) 
    .attr("width", function(d) { return x(d.value); }) 
    .on("mousemove", function(d){ 
     tooltip 
      .style("left", d3.event.pageX - 50 + "px") 
      .style("top", d3.event.pageY - 70 + "px") 
      .style("display", "inline-block") 
      .html((d.area) + "<br>" + "£" + (d.value)); 
    }) 
     .on("mouseout", function(d){ tooltip.style("display", "none");}); 

}）。

元の例はここにある：

https://bl.ocks.org/alandunning/7008d0332cc28a826b37b3cf6e7bd998

私は（前の回答を見て、.ATTRからRECT上のx属性変更する考え（ "x" を、0）.ATTRします"x"、function（d）{return width-x（d.value）}） しかし、それもうまくいきませんでした。

Answer 1

私は軸を逆転させたいと思っています。これを行い、バーが右から左に移動するようにするには、範囲と、矩形の描画方法の両方を変更する必要があります。

範囲は軸が正しい取得するには、次のようになります。

var x = d3.scaleLinear().range([width, 0]); 

その後、あなたは正しい場所にそれらを置くために、このようなrectsを描くことができます：

.attr("x", function(d){return x(d.value) }) 
.attr("width", function(d) { return x(0) - x(d.value); }) 

ここでフィドルです： https://plnkr.co/edit/4YLPCQ4SE35l4vZUy2tF?p=preview

これは意味ですか？

Answer 2

まず、私は考えていなかった、で開始するようにバーを設定し

x.domain([d3.max(data, function(d) { return d.value; }),0]); 

、

.attr("x", function(d){return x(d.value)}) 

と幅、

.attr("width", function(d) { return width - x(d.value); })