从右到左反转条
我是D3的新手。 我正在通过当前的例子工作。 我想要做的是反转条形图，所以所有标签都从图表的最后开始。 我将x坐标改为宽度，而不是0，并试图将宽度改为负宽度。
这是我目前的版本。
我基本上想要所有的酒吧在100分开始，而不是在0.谢谢！
https://plnkr.co/edit/fqW0i3H3ZACJx1oeViR6?p=preview
var svg = d3.select（“svg”），margin = {top：20，right：20，bottom：30，left：80}，width = + 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（）。range（[0，width]）; 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（function（a，b）{return 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
我查看以前的答案，并认为将rect上的x属性从.attr（“x”，0）更改为.attr（“x”，function（d）{return width-x（d.value）} ）但是也没有效果。
我假设你也想扭转轴线。 要做到这一点，并从右到左，酒吧需要改变范围和如何绘制rects。
范围应该看起来像这样才能使轴正确：
var x = d3.scaleLinear().range([width, 0]);
然后你可以像这样绘制矩形，把它们放在正确的位置上：
.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
这是你的意思吗？
首先扭转领域，
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); })
